CSS CSS Layout Basics Page Layout with the Float Property Clearing and Containing Floats

razmig pulurian
razmig pulurian
Courses Plus Student 23,888 Points

Why is "display: table" necessary for clearfix?

I understand that parent containers collapse when their children are floated, because the children are no longer in the normal document flow and the parent element no longer 'contains' anything (again, in terms of the normal document flow).

I also understand from a previous treehouse lesson that the ::after pseudo-class requires a "content" property, and that we set the value of the "content" property to a set of empty strings ("") so we don't actually add anything that is visible after the element we want to clearfix.

Finally, the "clear:both" part seems fairly explanatory. It's what actually does the 'clearing' in the clearfix :)

What I don't understand: Why are we required to add "display: table" for the clearfix to work? More specifically:

  1. Why are we required to add "display" anything at all? I have a hunch it's because the empty string added by the ::after pseudo-class is "inline" by default... but I'm not sure I've wrapped my head around why this matters.

  2. Why are we required to use "display: table" specifically? I tried "display: block" and it seemed to work just fine. Is display: table preferred here? Why?

5 Answers

  1. Yes you're right there. The CSS-Pseudo-Elements are inline by default.

  2. This has to do with Block Formatting Contexts(BFC). BFCs and floats can't overlap, therefore if you make your container a BFC, the floats can't overlap. This can be done in a couple of ways, but they all have their downsides because you have to change the overflow or display property. Table elements generate an empty row and an empty cell upon creation. And table-cells create new BFCs. So a good way to generate a BFC is to add empty table elements as "borders". And since you don't want to cluster your HTML file with tables and it's way more convenient if you can just add a class like .clearfix to your container. So there you have it.

If you would like to understand the concept in depth, you should check this article.

David Clugh
David Clugh
9,000 Points

Thank you for asking this.

It doesn't make sense. It just shows the unintuitive nature of CSS. Why isn't there a "parent-collapse: no-collapse;" type property after all of these years? But I guess flex-box "solves" this...

It is kind of like the border-box property. After years of saying IE doesn't display the box model properly, it is now standard to make containers act the way IE wasn't working "right". So funny and confusing.

Rails Duck
Rails Duck
8,545 Points

Honestly, I tried display: block and it still worked for me, so I think it has to be an element that stretches across the whole page regardless of the parent element's width to provide a correct clearfix. This is just a thought, though.

The teacher uses Display: Table;

Because to display the pseudo element to a block level table;