Html 浮动图像旁边的div背景显示在图像后面？

我有一个图像和两个div。图像向左浮动，div有一些背景色。由于某些原因，div的背景显示在图像后面（部分透明）。但是，div中的文本正确显示在图像旁边

img{
浮动：左；
}
div>div{
背景色：rgb（240、128、48）；
}

镰刀盔
一些信息

为什么会发生这种情况

因为这就是

float

的工作原理

只有内联内容（如文本、其他图像、跨距等）在图像周围浮动–块元素本身不浮动

但有一个简单的解决方法：让它们建立自己的块格式上下文——f.e.

overflow:hidden

可以实现这一点——然后它们也会在图像周围浮动

img{
浮动：左；
}
div>div{
溢出：隐藏；
背景色：rgb（240、128、48）；
}

镰刀盔
一些信息

为什么会发生这种情况

因为这就是

float

的工作原理

只有内联内容（如文本、其他图像、跨距等）在图像周围浮动–块元素本身不浮动

但有一个简单的解决方法：让它们建立自己的块格式上下文——f.e.

overflow:hidden

可以实现这一点——然后它们也会在图像周围浮动

img{
浮动：左；
}
div>div{
溢出：隐藏；
背景色：rgb（240、128、48）；
}

镰刀盔
一些信息

.test{
显示器：flex；
弯曲方向：行；
}
.文本{
弹性：2；
背景色：rgb（240、128、48）；
}

卡布托普斯

一些信息

.test{
显示器：flex；
弯曲方向：行；
}
.文本{
弹性：2；
背景色：rgb（240、128、48）；
}

卡布托普斯

一些信息

您可以尝试使用左边距：96px；在您的div>div样式上。但是，我认为z指数是更好的解决方案：）你们可以试着用左边的边距：96px；在您的div>div样式上。但是，我认为z-index是更好的解决方案：）谢谢！使用

溢出：隐藏工作得很有魅力：谢谢！使用
溢出：隐藏工作得很有魅力：啊，这也不错。谢谢但CBroe所说的正是我想要的。哦，这也不错。谢谢但CBroe所说的正是我想要的。