我试图了解CSS W3C规范部分原因：
为什么漂浮元素的父母会“崩溃”？
我发现这对很多人试图学习CSS布局技术来说是一个痛点.能够解释为什么这部分标准是以这种方式设置的,这将是有帮助的.一个合理的用例,也许吧？
注意：我不是问如何处理这种行为 – 这里已经完全涵盖了：
How do you keep parents of floated elements from collapsing?.
最佳答案
看一下w3c CSS 2.1规范中的这一部分：9.5 Floats
请注意底部的这个图像,就在3.5.1节之前：
原文链接：https://www.f2er.com/css/427073.html请注意底部的这个图像,就在3.5.1节之前：
…这似乎提供了我之后的用例：
案例描述：您在段落中浮动了一个图像,其高度足以使其远远低于其兄弟文本.通常,您希望后续段落中的文本也包含此图像.实现此目的的方法是允许图像突出到包含段落之外.否则 – 如果第一个,包含段落的高度一直向下延伸以包裹图像 – 后续段落将完全向下推到图像下方,在两个段落的文本之间留下一个大的空白区域.
但是：在使用浮动时,我们通常不希望出现这种效果.因此,我们经常需要浮动来布局网页的主要区域(以免我们使用表格),在这些情况下,我们通常需要一个容器来扩展以包含其高度计算中的内容.
我的愿望：那么,似乎应该有一个CSS属性：
Box-model-height: [ include-floats | exclude-floats ];
浏览器可以将段落的默认值设置为“exclude-floats”,将所有其他块设置为“include-floats”.
或者,如果这会破坏太多设计,“exclude-floats”可能是任何地方的默认设置,我们仍然可以在任何地方修复情况,完全在样式表中,而不是需要类名(例如clearfix) )在标记中.
