为什么浮动元素的非浮动父母会崩溃？

Question

我试图了解CSS W3C规范部分原因背后的原因：

为什么漂浮元素的父母会“崩溃”？

我发现这对很多人试图学习CSS布局技术来说是一个痛点。能够解释为什么这部分标准是以这种方式设置的，这将是有帮助的。一个合理的用例，也许吧？

注意：我不要求 如何处理此行为 - 这已在此处详细介绍： How do you keep parents of floated elements from collapsing?。

Answer 1

在w3c CSS 2.1规范中查看此部分：9.5 Floats
请注意底部的这个图像，就在3.5.1节之前：

...这似乎提供了我之后的用例：

案例描述：您的图片在里面一个段落，其高度足以使其远远低于其兄弟文本。通常，您希望后续段落中的文本也包含此图像。实现此目的的方法是允许图像突出到包含段落之外。否则 - 如果第一个，包含段落的高度一直向下延伸以包裹图像 - 后续段落将完全向下推到图像下方，在两个段落的文本之间留下一个大的空白区域。

但是：在使用浮动时，我们通常不希望出现此效果。因此，我们经常需要浮动来布局网页的主要区域（以免我们使用表格），在这些情况下，我们通常需要扩展容器以在其高度计算中包含内部的任何。 / p>

我的愿望：那么，似乎应该有一个CSS属性：

box-model-height: [ include-floats | exclude-floats ];

浏览器可以将段落的默认值设置为“exclude-floats”，将所有其他块设置为“include-floats”。

或者，如果这会破坏太多的设计，“exclude-floats”可能是任何地方的默认设置，我们仍然可以在任何需要的地方，完全在样式表中修复情况，而不是需要类名（例如，clearfix）在标记中。

Answer 2

因为他们什么都没有。浮动元素在它的父元素中不占用任何空间，因此父元素认为它是空的并且相应地表现。

Answer 3

因为只要你指定了float属性，它就会成为没有set属性的box模型的一部分，所以你需要定义width和height或min-height：