为什么设置CSS中的'float'属性会影响父级兄弟DIV？

Question

我有这段简单的HTML代码，想知道为什么父级兄弟div会受到float CSS属性的影响。是因为float相对于窗口而不是带有float属性的元素块吗？

.floatLeft {
  float:left;
}

<div >
  <img class="floatLeft" src="https://istack.dev59.com/xdrQi.webp?s=48&g=1"/>
  <p>test</p>
</div>
<div>
  <p>test1</p>
</div>

- LF00

---

你需要清除浮动。因此，在第二个 div 上设置 clear: left; 或 clear: both;。 - SKeurentjes

Answer 1

这是因为父元素会发生折叠。请参见The great collapse。

发生这种情况的原因是，否则几乎没有办法将文本包围在图像周围。因此，父元素会折叠到其非浮动内容所需的最小高度，并且下一个div会向上移动，其内容也会遵守图像的浮动。这样，您就可以轻松地创建这些文本布局，否则将很难实现。

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

在下面的示例中，我只添加了一小段CSS代码，找到第一个div，并对::after伪元素进行样式设置，以便在第一个div的内容后插入一个已清除的元素。

这将强制第一个div增长到图像以下，因此第二个div被迫向下移动。

您可以为第一个div添加类来选择它，但是出于论据的缘由，我使用了选择器div:first-child::after，这样我就可以完全不改变您示例的标记：

.floatLeft {
  float:left;
}

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

<div >
  <img class="floatLeft" src="https://istack.dev59.com/xdrQi.webp?s=48&g=1"/>
  <p>test</p>
</div>
<div>
  <p>test1</p>
</div>

如果您想了解有关浮动的更多信息，包括各种清除浮动的方法，请参阅CSS-Tricks.com上的优秀文章All about floats。

- GolezTrol

Answer 2

    .floatLeft {
      float:left;
    }
    .clear:after {
      content: '';
      display: block;
      clear: both;
    }

    <div class="clear">
      <img class="floatLeft" src="https://istack.dev59.com/xdrQi.webp?s=48&g=1"/>
      <p>test</p>
    </div>
    <div>
      <p>test1</p>
    </div>
 

- Alex