html - 为什么 'float' css 属性会影响父同级 div？

Question

我有这个简单的 html 代码，我想知道为什么父兄弟 div 会受到 float css arrtibute 的影响。 float 是相对于window 不是block 里面有float 的元素吗？

.floatLeft {
  float:left;
}

<div >
  <img class="floatLeft" src="/image/xdrQi.jpg?s=48&g=1"/>
  <p>test</p>
</div>
<div>
  <p>test1</p>
</div>

Answer 1

那是因为父元素折叠了。参见 The great collapse .

发生这种情况的原因是，否则几乎无法将文字环绕在图像周围。所以父级折叠到其非 float 内容所需的最小高度，而下一个 div 只是向上移动，其内容也尊重图像的 float 。通过这种方式，您可以轻松创建这些类型的文本布局，否则这几乎是不可能的。

如果您出于某种原因不想这样做，您可以清除第二个 div，这样它就不会漂浮在图像旁边，有多种方法可以做到这一点，但一个常见的一种是使用伪元素作为“clearfix”元素。此解决方案的优点是您不需要任何额外的标记，除了可能需要一个 id 或类来标识要清除的元素。

在下面的示例中，我只是添加了一个 CSS 片段，它找到了第一个 div，并为 ::after 伪元素设置了样式，这样就好像您在第一个分区。

这将强制第一个 div 增长到图像下方，因此第二个 div 被强制 fown。

您可以向第一个 div 添加一个类来选择它，但为了论证，我使用了选择器 div:first-child::after，所以我可以留下标记-您的示例完全未受影响:

.floatLeft {
  float:left;
}

div:first-child::after {
  content: "";
  display: block;
  clear: both;
}

<div >
  <img class="floatLeft" src="/image/xdrQi.jpg?s=48&g=1"/>
  <p>test</p>
</div>
<div>
  <p>test1</p>
</div>

有关 float 主题的更多信息，包括进行清除修复的各种方法，请参阅出色的 All about floats在 CSS-tricks.com 上。