Clearing Floats

A frequent point of confusion with the CSS float model is the need for a “clearing” element beneath something that is floated if you want the containing element of the float to fully contain it. Eric Meyer’s Containing Floats provides an excellent explanation of this issue.

Unfortunately, the standard method for dealing with this involves adding ugly additional markup to the document to act as a “clearer”. It is often possible to take advantage of another element in the document, but frequently no such element is available and an extra clearing element must be added.

Tony Aslett has published an article (also discussed here) explaining a way around this problem. It starts with the observation that the CSS :after pseudo-element can be used in browsers with good CSS 2 support to add an effective clearing element using the CSS itself:


.floatcontainer:after{
content: ".";
display: block;
height: 0;
overflow: hidden;
clear: both;
visibility:hidden;
}

That’s enough to solve the problem in most modern standards compliant browsers, with the very notable (and not entirely unexpected) omission of Internet Explorer for both Mac and Windows. Tony proposes fixes for these browsers which take advantage of a number of CSS hacks, including one that relies on a documented bug in IE/Windows’s float model.

I tend to have a cautious attitude towards technique that involve multiple browser hacks, as there’s always the possibility of the undocumented bugs involved interacting in unpredictable ways. It’s worth reading upon the details of the technique as you will certainly learn something about the CSS float model and/or IE’s mistreatment of it but I would recommend caution when it comes to actually implementing it. Still, it’s another tool for the tool box.

Free book: Jump Start HTML5 Basics

Grab a free copy of one our latest ebooks! Packed with hints and tips on HTML5's most powerful new features.

  • dave

    I dont know why people post articles about techniques that don’t work in IE. What is the point.

  • http://simon.incutio.com/ Skunk

    Firstly, this technique does work in IE – read the article to see how. Secondly, IE is essentially dead in the water and has been for two years now. The rest of the world is moving on, and because browsers such as FireFox and Safari are implementing W3C recommendations (such as CSS 2.1) future versions of IE should implement the same new features. In the meantime, it makes sense to take advantage of new techniques while ensuring that the 90+% of the web still using IE don’t miss out.

    • Adrian

      How do you feel now? IE is NOT dead in the water and it is STILL messed up.
      Hope you learnt your lesson.

  • Jan Korbel

    No doubt that the :after pseudo selector is the best way but since it does not work in IE I see no big problem in using my favourite < br class="floatStop" /> defined as
    br. floatStop {
    line-height: 0.1%;
    font-size: 0.1%;
    clear: both;
    }

    After all we want sort of line break here :)

  • bart

    To avoid,”a ‘clearing’ element beneath something that is floated if you want the containing element of the float to fully contain it,”
    use float:whatever on the container div. The nested floats will not overflow the container’s boundaries. It’s also important to remember to use clear:whatever on the section following the floated container.

  • http://boyohazard.net Octal

    Thanks for yet another “tool for the toolbox” Simon. Keep them coming please

  • http://www.fruitysolutions.com philwilks


    ;)

  • Stijn


    Invalid markup!?