为什么浮动的父母和浮动的孩子不会崩溃？答案

【问题标题】：Why do floating parent with floating children does not collapse?为什么浮动的父母和浮动的孩子不会崩溃？
【发布时间】：2017-11-29 23:43:46
【问题描述】：

为什么如果 div 元素是浮动的，并且它的所有子元素都浮动，它不会崩溃（就像“正常”div 会做的那样）？

这里有一个例子 https://codepen.io/anon/pen/MOPMPz

HTML

<div class="float">
  <div class="elem">Elem 1</div>
  <div class="elem">Elem 2</div>
  <div class="elem">Elem 3</div>
</div>

<div class="clear"></div>
<br>

<div class="no-float">
  <div class="elem">Elem 1</div>
  <div class="elem">Elem 2</div>
  <div class="elem">Elem 3</div>
</div>

CSS

.clear {
  clear: both;
}

.float {
  background-color: salmon;
  border: 2px solid purple;
  float: left;
}

.no-float {
  background-color: red;
  border: 2px solid purple;
}

.elem {
  border: 1px dashed green;
  float: left;
}

结果

我的预期结果是看到divs（.float 和.no-float）都崩溃了。

我在哪里可以找到解释这一点的资源？

【问题讨论】：

这是预期的结果。您应该阅读更多关于 float 样式对元素的作用。网上有很多关于此的文档。我建议 MDN（Mozilla 开发者文档）。此外，您在下面有一个答案。那是正确的

标签： html css css-float

【解决方案1】：

根据 Mozilla 文档：

...当一个元素浮动时，它会脱离文档的正常流程（尽管仍然是它的一部分）。它向左或向右移动，直到它接触到其包含框的边缘，或另一个浮动元素。

因为它是从正常流程中取出的，所以“no-float” div 没有任何内容，所以它的高度是 0 像素。当您使包装 div 浮动时，它就在文档的这个“子流”中，并且实际上包含嵌套在其中的三个浮动元素。如果您的布局要求包装 div 不会浮动，您可以将 overflow: auto; 添加到 .no-float 的样式中，它会“重新获得”它的高度，并且不会像自己的浮动元素一样。

【讨论】：