6

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

Community
  • 1
  • 1
Faust
  • 15,130
  • 9
  • 54
  • 111

3 Answers3

4

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.

Faust
  • 15,130
  • 9
  • 54
  • 111
  • I just came across this Chris Coyier article, which explains this more elegantly, and predates my question and answer: https://css-tricks.com/containers-dont-clear-floats/ – Faust Apr 19 '16 at 20:13
0

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.

Doozer Blake
  • 7,677
  • 2
  • 29
  • 40
  • But *why* does it take up no space in the mind of its parent? There are means for inducing the parent to "see" its floated children (e.g., make the parent float), so why is that not the case by default? When would you *want* it that way anyway? I never do. – Faust Oct 05 '11 at 21:06
  • Think of it this way: I'm trying to explain to some skeptical back-end developer why he should use floats for layout instead of tables. I explain that in order for the background on that div to paint all the way around everything inside it, he has to do these extra CSS back-flips. So, why must he do that? In what case would this behavior of the parent collapsing be in any way useful? Why is the spec this way? As it is, I use floats everywhere in my layouts. And my markup is littered with dozens of class="clearfix". Why *should* I need to do that? – Faust Oct 05 '11 at 21:18
  • @Faust So you're not his boss and can't just tell him, because that's the way it is? :) I see where you're coming from, and sometimes it's a tough argument because I don't think that float was every really meant to be a layout an entire website type thing. I think the original thinking was to flow images and photos into content much like a print layout would. – Doozer Blake Oct 05 '11 at 22:18
  • I believe tables were also never meant to be a "layout an entire website type thing". So, what, then has ever been incorporated into the CSS standard for laying out web sites? – Faust Oct 05 '11 at 22:28
  • Well, the CSS1 spec had nothing about positioning in it. The idea of positioning for layout didn't really come about until the CSS2 spec. But they layout the idea pretty well here if you can get through it: http://www.w3.org/TR/CSS21/visuren.html Not sure of the best way to summarize it. I'm sure someone has said it elegantly somewhere. – Doozer Blake Oct 05 '11 at 22:45
0

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:

mindmyweb
  • 888
  • 9
  • 13
  • Not sure I understand this. Why must that behave differently from text that's added into a parent? Again: I can have floats inside my parent, and I can induce my parent to see these are part of its overall hight (a la clearfix), so why is this not the default behavior, and in what case would this collapsing be desireable? – Faust Oct 05 '11 at 21:23
  • ...that is, a block of text within a div "has no set property" -- it can be squeezed to one side by a sibling float, but the parent (div) has no problem recognizing the text and adjusts its computed height to account for it - by default. Why can't (or more to the point, shouldn't) the parent do the same with a floated child - by default? It would certainly need to additional information. FireFox renders the outline property as if the floats were seen by the parent -- by default -- with no additional information. – Faust Oct 05 '11 at 22:18