漂浮的元素浮动父母崩溃？
我试图理解部分CSS W3C规范的推理：
为什么浮动元素的父母“崩溃”？
我发现这是很多尝试学习CSS布局技巧的人的一个痛点。 能够解释为什么这部分标准是以这种方式建立的将是有帮助的。 也许是一个合理的用例？
注意：我不是在问如何处理这种行为 - 这已经在这里得到了彻底的讨论：你如何阻止浮动元素的父母崩溃？
看看w3c CSS 2.1规范中的这个部分：9.5 Floats
在第3.5.1节前面的底部注意这张图片：
...这似乎提供了我之后的用例：
案例描述：您的图片在一段文字中浮动，其高度足够高，可以远远低于其兄弟文字。 一般来说，您希望后续段落中的文字也能够环绕此图片。 达到此目的的方法是让图像突出到包含段落之外。 否则 - 如果第一个，包含段落的高度一直向下展开以包裹图像 - 后续段落被完全压低到图像下方，在两段文本之间留下大的空白区域。
但是：更多情况下，我们不希望使用浮动时产生这种效果。 因此，我们经常需要花车来布局网页的主要区域（以免我们诉诸表格），在这种情况下，我们通常需要一个容器来扩展，以包含高度计算中的任何内容。
我的愿望：那么，似乎应该有一个CSS属性：
box-model-height: [ include-floats | exclude-floats ];
浏览器可以将默认段落设置为“排除浮动”，将所有其他块设置为“包含浮动”。
或者如果这会打破太多的设计，那么“排除浮动”可能是所有地方的默认设置，我们仍然可以在需要的地方完全修改样式表中的情况，而不需要类名称（例如，clearfix ）在标记中。
因为他们什么都没有。 一个浮动元素在它的父元素的头脑中不占用空间，所以父类认为它是空的并且相应地行为。
因为只要您分配浮动属性，它就成为没有设置属性的框模型的一部分，因此您需要定义宽度和高度或最小高度：
链接地址: http://www.djcxy.com/p/88409.html