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
Agata Zurek
Full Stack JavaScript Techdegree Graduate 26,419 PointsWhy does Guil add a clearfix class?
In the video for floats, Guil adds a class to the div tag nested in the header :
Why did Guil add a clearfix class instead of using an existing class like main-header?
How do we choose where to place the clearfix class? Why is it put in div instead of main-header?
2 Answers
Jamie Reardon
Treehouse Project ReviewerBecause he/you can then use that class wherever their are floating elements in other areas of content on the webpage. This is a DRY (Don't repeat yourself) principle concept which you will learn about in a later CSS course.
You place the class to the container that holds floating elements. Why? Because the whole purpose of the clearfix method is to prevent the container's heights from collapsing.
Agata Zurek
Full Stack JavaScript Techdegree Graduate 26,419 PointsThank you, that helps!
Agata Zurek
Full Stack JavaScript Techdegree Graduate 26,419 PointsAgata Zurek
Full Stack JavaScript Techdegree Graduate 26,419 PointsThank you! That answers the question perfectly.
I still don't see why you would pick div vs. main-header, they both contain the floating elements and putting it in either appears to work.
Jamie Reardon
Treehouse Project ReviewerJamie Reardon
Treehouse Project ReviewerMaybe I wasnt clear enough with the 2nd explanation. The container is the parent containing element for the floating elements. Main header has a div nested inside, this is not the parent container of the floated elements, so that would not make use for the clearfix method, try it yourself with a red border around the main header and then one around the div (you will see that the divs height has collapsed and when you apply the clearfix class to it, the height is back and you should be able to see the red border to prove it. The div is because it is the parent container for the floating elements. So in short, you want to apply these styles to the containing element of the floated elements.