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

  • By
    Send Text Messages with PHP

    Kids these days, I tell ya.  All they care about is the technology.  The video games.  The bottled water.  Oh, and the texting, always the texting.  Back in my day, all we had was...OK, I had all of these things too.  But I still don't get...

  • By
    Responsive and Infinitely Scalable JS Animations

    Back in late 2012 it was not easy to find open source projects using requestAnimationFrame() - this is the hook that allows Javascript code to synchronize with a web browser's native paint loop. Animations using this method can run at 60 fps and deliver fantastic...

Incredible Demos

  • By
    MooTools 1.2 OpenLinks Plugin

    I often incorporate tools into my customers' websites that allow them to have some control over the content on their website. When doing so, I offer some tips to my clients to help them keep their website in good shape. One of the tips...

  • By
    Create a Context Menu with Dojo and Dijit

    Context menus, used in the right type of web application, can be invaluable.  They provide shortcut methods to different functionality within the application and, with just a right click, they are readily available.  Dojo's Dijit frameworks provides an easy way to create stylish, flexible context...

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!