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 Basics (2014) Basic Layout Clearing Floats

Patrick Vanegas
Patrick Vanegas
6,971 Points
Posted by Patrick Vanegas
Patrick Vanegas
6,971 Points

Still confused as to what the clearfix is actually doing. Can someone please break it down line by line for me?

Thank you!

2 Answers

Jun Zhang
Jun Zhang
10,785 Points
Jun Zhang
Jun Zhang
10,785 Points

https://css-tricks.com/all-about-floats/

You need to apply "clearfix" to the element(we can call it "clear element") which is "right after" the floated element(s) before it;

This "clear element" could be:

(1) a <div> block with "clearfix" class; or

(2) a pseudo element with "clearfix" class. This pseudo element is created by applying "::after" to it's parent (because pseudo element is to create a child element)

Both methods are essentially the same, but 2 is creating less html code.

Hopefully this helps.