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
robinbehroozi
15,912 PointsThe Float Clearfix...
Hi…
I'm not really sure what the clear fix does…or even what the syntax means. For instance, the Float clear fix example that they use in the video says
/*.group::after{ content:""; display:table; clear:both; } */
so, what does content:""; mean? What does display:table mean? I'm guessing that clear:both means something like clear both sides, but I'm not sure what it means. When do you use it?
They were talking about something collapsing, which is the reason why they are using the clear fix…I just have trouble understanding the concept.
Any help would be greatly appreciated. Thanks.
4 Answers
Paul Yabsley
46,713 PointsThe clear property allows you to 'clear' html elements that follow other html elements that have been floated. When elements are floated it can sometimes content to display right next to the floated element. One way to get around this issue is to use the clear property. It can be a tricky concept to get your head round at first.
The code you posted above is a method of clearing floats using just css and no markup. The content property allows you to insert things into the markup using just css. In the code above you are inserting effectively nothing, the bits between the quotes. However you are also giving it a display property which then allows it to be used to clear the floats. Display table tells the browser you want that element to display like a table does: take up the full width of its container. This method is detailed here: http://nicolasgallagher.com/micro-clearfix-hack/
There are other ways to clear floated elements, Chris Coyier talks about them here: http://css-tricks.com/snippets/css/clear-fix/
Darrel Lyons
2,991 PointsWhen i joined Treehouse, i also set up a free host and domain. I found writing everything i did and then setting myself little tasks the best way to learn. I had no idea what clear both meant but i would look up on every little bit. You're right when you said clear: both; means to clear both sides. I would also recommend mixing Treehouse with w3schools but that's up to you.
Guil Hernandez
Treehouse TeacherHi Robin Behroozi,
Also, take a look at this video. I explain clear in detail starting at the 5:45 mark.
Hope this helps. :)
robinbehroozi
15,912 PointsThanks Guil…it does help. :)
robinbehroozi
15,912 PointsPaul and Darrel Thank you both for your comments…
robinbehroozi
15,912 Pointsrobinbehroozi
15,912 PointsPaul… I think I'm starting to understand what's going on according to your comments and other sites I've visited. The clear fix examples that I saw were for divs that were collapsing or not containing the elements that were in them. The clear fix was a way to 'put back' the elements so that the containing box would surround them.
The content property allows there to be something for the containing box to wrap around, even though it contains nothing. The clear both allows both sides to be cleared. But the table part still doesn't make sense to me. Couldn't the example say…display:block? Why does it need to be a table?
Thanks.
Paul Yabsley
46,713 PointsPaul Yabsley
46,713 PointsWhen floated elements are within a container they are removed from the document flow and will no longer affect the height of the container. Clearing the floated elements gives the container back some context for its height. In other words, an element below the floated elements (even if that element has no height itself or is created using the content property in css) tells the container it needs to be as tall as where that element is.
The reason to use display table according to Nicolas Galagher is:
"This creates an anonymous table-cell and a new block formatting context that means the :before pseudo-element prevents top-margin collapse. The :after pseudo-element is used to clear the floats. As a result, there is no need to hide any generated content and the total amount of code needed is reduced.
Including the :before selector is not necessary to clear the floats, but it prevents top-margins from collapsing in modern browsers."
He also mentions other methods of float containment such as overflow:hidden which you may want to look into as an option too.