Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Why do non-floating parents of floating elements collapse?

Tags:

css

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?.

like image 961
Faust Avatar asked Oct 05 '11 20:10

Faust


People also ask

What will happen if a parent element only has floating elements inside?

If a parent element has only floated children within it, it will collapse as though it is empty. This is similar to how a parent element behaves when it has an element absolutely positioned within it.

When two children of a parent div are floated the parent will collapse this is solved by adding what to the parent?

Answer: Use the CSS clear property When float property applied to the element inside the non floated parent, the parent element doesn't stretch up automatically to accommodate the floated elements. This behavior is typically known as collapsing parent.

What causes container collapse HTML?

Floating elements causes the parent to collapse.

Which property indicates what the non floating element will do around the floating ones?

The float property specifies whether an element should float to the left, right, or not at all.


1 Answers

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:

image protruding outside containing paragraph, while text in following paragraph wraps it.

... 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.

like image 80
Faust Avatar answered Oct 14 '22 00:10

Faust