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

【问题标题】：Why the 'float' css attribute influence parent sibling div?为什么'float' css 属性会影响父兄弟 div？
【发布时间】：2016-12-06 05:57:53
【问题描述】：

我有这个简单的 html 代码，我想知道为什么父兄弟 div 会受到 float css arrtibute 的影响。浮动是相对于窗口而不是带有浮动arrti的元素的块吗？

.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>

【问题讨论】：

你必须清除浮动。所以在第二个 div 上设置 clear: left;或明确：两者；

标签： html css dom css-float

【解决方案1】：

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

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

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

在下面的示例中，我只是添加了一个 CSS 的 sn-p 来查找第一个 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://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。

【讨论】：

【解决方案2】：

    .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>

【讨论】：