Why do non-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 sta开发者_JAVA百科ndard 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.

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.

because as soon as you assign the float property it becomes part of the box model that has no set property so you need to define width and height or min-height: