html - float 图像旁边的 div 背景显示在图像后面？

Question

我有一张图片和 2 个 div。图像向左浮动，div 具有一些背景颜色。由于某种原因，div 的背景显示在图像后面(部分透明)。但是，div 中的文本会正确显示在图像旁边。

img {
  float: left;
}

div > div {
	background-color: rgb(240, 128, 48);
}

<div>
  <img src="http://pokeapi.co/media/sprites/pokemon/141.png"/>
  <div>Kabutops</div>
  <div>Some info</div>
</div>

我希望橙色背景仅从图像右侧开始，而不是图像下方。

为什么会这样？是否可以只用 css 修复它？

Answer 1

Why does this happen?

因为这就是 float 的工作方式。

只有文本、其他图像、span 等内联内容......漂浮在图像周围—— block 元素本身不是。

但是有一个简单的解决方法:让他们建立自己的 block 格式化上下文——f.e. overflow:hidden 可以实现——然后它们也会漂浮在图像周围。

img {
  float: left;
}

div > div {
    overflow: hidden;
	background-color: rgb(240, 128, 48);
}

<div>
  <img src="http://pokeapi.co/media/sprites/pokemon/141.png"/>
  <div>Kabutops</div>
  <div>Some info</div>
</div>