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 The Float Challenge

Christopher Lebbano
Christopher Lebbano
15,338 Points
Posted by Christopher Lebbano
Christopher Lebbano
15,338 Points

Why does the clearfix for a collapsing container still work even without the ::after pseudo element?

I was toying around a bit to try and see what exactly the ::after psudeo class was doing after I completed the challenge. I removed the ::after part and left it like this:

.clearfix { content: ""; display: table; clear: both; }

When I fiddled around with the development tools, I noticed I could no longer find the actually pseudo element of 0x0 "" anywhere on the page, yet the container was -not- collapsing (when I assumed it would collapse with the removal of the ::after part of the code).

So what is actually keeping my container from collapsing now?

2 Answers

Tomasz Halaczkiewicz
Tomasz Halaczkiewicz
21,845 Points
Tomasz Halaczkiewicz
Tomasz Halaczkiewicz
21,845 Points

Your container is being kept from collapsing by the .clearfix class. You still have it in index.html file assigned to div inside the header. So it ignores the ' content: ""; ' declaration as it doesn't make sense anymore and than executes the clear: both property. If you want your header to collapse you should get rid of clearfix class in index.html.

mldesign
mldesign
5,479 Points
mldesign
mldesign
5,479 Points

You don't have to use ::after as you would normally make your clear class like this:

.clear { clear: both; }

and have a div with the clear class after the whatever you floated.

<aside>floated content</aside> <div class="clear"></div>

You would use the ::after pseudo element if you wanted to have the clearfix in same place as your floated content, and it clears it afterwards.