floating parents of floating elements collapse?
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 (eg clearfix) in the markup.
Because they have nothing in them. A floated element takes up no space in the mind of it's parent, so the parent think it's empty and behaves accordingly.
因为只要您分配浮动属性，它就成为没有设置属性的框模型的一部分，因此您需要定义宽度和高度或最小高度：
链接地址: http://www.djcxy.com/p/88410.html上一篇: 在HTML页面上隐藏滚动条
下一篇: 漂浮的元素浮动父母崩溃？