为什么 'float' css 属性会影响父兄弟姐妹 div？

Question

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

.floatLeft {
  float:left;
}

<div >
  <img class="floatLeft" src="https://i.stack.imgur.com/xdrQi.jpg?s=48&g=1"/>
  <p>test</p>
</div>
<div>
  <p>test1</p>
</div>

Answer 1

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

    <div class="clear">
      <img class="floatLeft" src="https://i.stack.imgur.com/xdrQi.jpg?s=48&g=1"/>
      <p>test</p>
    </div>
    <div>
      <p>test1</p>
    </div>

Answer 2

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

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

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

在下面的示例中，我只是添加了 CSS 的片段，它找到了第一个 div，并设置了 ::after 伪元素的样式，所以就像您插入一个已清除的第一个 div 内容之后的元素。

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

你可以在第一个div到select的前面加上一个class，但是为了论证，我用了select或者div:first-child::after, 所以我可以完全不修改你的例子的标记:

.floatLeft {
  float:left;
}

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

<div >
  <img class="floatLeft" src="https://i.stack.imgur.com/xdrQi.jpg?s=48&g=1"/>
  <p>test</p>
</div>
<div>
  <p>test1</p>
</div>

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

为什么 'float' css 属性会影响父兄弟姐妹 div？

Why the 'float' css attribute influence parent sibling div?

html

css

dom

css-float