CSS Clear Fix
Clearing CSS floats is just as important to creating CSS structures as anything could be. For years we would clear our floated elements by adding one element with the clear: both; style simple to perform the clear. This practice was fine but it introduced elements into the page that we really didn't need if there was a better way. Today there is, and it involves using CSS pseudo-elements on a parent element!
The CSS
This excellent CSS clear fix uses :before and :after pseudo-elements of the container to perform the clear:
/* Assuming this HTML structure:
<div class="clear">
<div class="floated"></div>
<div class="floated"></div>
<div class="floated"></div>
</div>
*/
.clear:before,
.clear:after {
content: " ";
display: table;
}
.clear:after {
clear: both;
}
This is the part of the tutorial where I explain what each property does toward the goal but honestly, you probably don't care. What's important is that this CSS reliably clears floating child elements so that the next set of elements has a clear plain to begin from!
If you are interested to understand what each part does, check out Nicolas Gallagher’s micro clearfix hack.
I have been usting this one for some time now:
http://nicolasgallagher.com/micro-clearfix-hack/
And this one before that :)
http://www.yuiblog.com/blog/2010/09/27/clearfix-reloaded-overflowhidden-demystified/
The problem with these techniques is that you either have to put the class in the HTML (which is a bit bad) or clutter your CSS with repeated code (which is plainly bad).
CSS preprosessors (don’t recall which ones do it) that can merge the same rules into one big multiselector can offer some help, but that is also not perfect.
But anything is better than br clear=”all” :)
99.9% of the time overflow:hidden on the containing element serves the purpose of containing children. The only side effect is that it will also contain the margins of those children, which is usually not a problem and exists as a problem with almost all clearfix solutions. Further, this requires no non-semantic markup at all. There are only rare occasions when clearfix serves a purpose (usually revolving around positioned elements in the wrapper)
99.9% of the time overflow:hidden on the containing element
serves the purpose of containing children. One side effect is that
it will also contain the margins of those children, which is usually
not a problem and exists as a problem with almost all clearfix solutions.
Further, this requires no non-semantic markup at all. There are only rare
occasions when clearfix serves a purpose (usually revolving around
positioned elements in the wrapper), this is the obvious second side
effect of this method. See Pavel Linhart’s link demystified overflow: hidden
This seems a little late to the game. The aforementioned micro clearfix method seems to be the de facto standard method according to people smarter than me (namely the HTML5 Boilerplate crew). I’m curious what this version brings to the table the the other one doesn’t, aside from obviously not supporting IE 6/7 (which I think we’re all ok with)?
I’ve been using clear fix, but not this way. I always made a class called clear and added it an empty div after and before the elements. :P But this seems to be much easier and more efficient. Thanks!
Regards,
Andor Nagy
Clearing floated elements was one of the earlier problem in html css, we use to use clear:both with simple clear div, but I think these days it has come a long way with clearfix usage, great techs.
@Kevin Peno – clearfix is necessary, I disagree that it is “rarely ever needed.” “overflow: hidden;” is also a workaround, not really a semantic solution. “overflow: hidden;” can make dealing with things like dropdown menus difficult, since it will cut off anything that’s contained within the parent. For example, if your header is set to “overflow: hidden” because it contains floating elements, then when your dropdown goes below the bottom of the header, it will be cut off. There’s no way around this except a solution like clearfix. A more cross-browser (but messier) solution is to add a div with “clear: both;” set to to the very end of any divs containing floating elements.