为什么浮动元素的非浮动父母崩溃？ [英] Why do non-floating parents of floating elements collapse?

问题描述

我想了解CSS W3C规范背后的原因：

为什么浮动元素的父节点崩溃？

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

注意：我不是要求如何来处理这种情况， b $ b 如何让父母的浮动元素崩溃？。

解决方案

请参阅w3c CSS 2.1规范中的此部分： 9.5 Floats

请注意底部的第3.5.1节之前的图片：

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

案例描述：您有一个图片悬浮在 里面一个足够高的段落，它在同级文本下面延伸。一般来说，您可能希望后续段落中的文字也会环绕此图片。实现这一点的方法是允许图像突出到包含段落之外。否则 - 如果第一个，包含段落的高度向下延伸，以包裹图像 - 后续段落被完全推到图像下方，在两段文本之间留下一个大的空白。

但是：更多的时候，我们不想使用浮动时的效果。因此，我们经常需要使用浮动对网页的主要区域进行布局（避免我们使用表格），在这些情况下，我们通常需要一个容器来扩展，以便在其高度计算中包含 。 / p>

我的愿望：看起来，应该有一个CSS属性：

  box-model-height：[include-floats | exclude-float]; 
  

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

或者，如果这将打破太多设计，exclude-floats可能是默认无处不在，我们仍然可以解决这个情况，到，完全在样式表中，而不是在标记中需要类名（例如clearfix）。

I'm trying to understand the reasoning behind part of the CSS W3C spec:

Why do parents of floating elements "collapse"?

I have found this to be a pain-point for a lot of people trying to learn CSS layout techniques. It would be helpful to be able to explain why this part of the standard was set up this way. A reasonable use case, perhaps?

Note: I am not asking how to deal with this behavior -- that's been thoroughly covered here: How do you keep parents of floated elements from collapsing?.

解决方案

Take a look at this section in the w3c CSS 2.1 spec: 9.5 Floats
Note this image at the bottom, just before section 3.5.1:

... this seems to provide the use-case I'm after:

Case description: You have an image floated inside a paragraph with a great enough height that it extends well below its sibling text. In general, you'd want the text in the subsequent paragraph to wrap around this image as well. The way to achieve this is to allow the image to protrude outside the containing paragraph. Otherwise -- if the first, containing paragraph's height extends all the way down to wrap the image -- the subsequent paragraph gets pushed down completely below the image, leaving a large white-space between the texts of the two paragraphs.

However: more often than not we don't want this effect when using floats. So often we need floats to layout main areas of a web page (lest we resort to tables), and in these cases we typically need a container to expand to include whatever is inside in its height calculation.

My wish: It seems, then, that there should be a CSS property along the lines of:

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

Browsers could have the default on paragraphs as "exclude-floats", and all other blocks as "include-floats".

Or if that would break too many designs, "exclude-floats" could be the default everywhere, and we could still fix the situation, wherever we need to, entirely in the style-sheet, instead of requiring a class-name (e.g. clearfix) in the markup.

这篇关于为什么浮动元素的非浮动父母崩溃？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！