CSS Clear Fix

By  on  

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!

Recent Features

Incredible Demos

  • By
    Retrieve Your Gmail Emails Using PHP and IMAP

    Grabbing emails from your Gmail account using PHP is probably easier than you think. Armed with PHP and its IMAP extension, you can retrieve emails from your Gmail account in no time! Just for fun, I'll be using the MooTools Fx.Accordion plugin...

  • By
    jQuery Random Link Color Animations

    We all know that we can set a link's :hover color, but what if we want to add a bit more dynamism and flair? jQuery allows you to not only animate to a specified color, but also allows you to animate to a random color. The...

Discussion

  1. If you are interested to understand what each part does, check out Nicolas Gallagher’s micro clearfix hack.

  2. Pavel Linhart

    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” :)

  3. Kevin Peno

    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)

  4. Kevin Peno

    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

  5. Webbower

    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)?

  6. 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

  7. 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.

  8. Ben

    @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.

Wrap your code in <pre class="{language}"></pre> tags, link to a GitHub gist, JSFiddle fiddle, or CodePen pen to embed!