Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

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

Posted by 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

mrhummel
mrhummel
Courses Plus Student 1,765 Points

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

osman musse
osman musse
99 Points
osman musse
osman musse
99 Points

The teacher uses Display: Table;

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