The Lodge is members-only design/dev videos and Office Hours.

Next Office Hours Session: "Programming Fundamentals" Dec 02 - 2:00 PM Eastern

What is the best way of clearing floats in css?

  • # January 25, 2013 at 4:11 pm

    **Method 1**

    Nicole Sullivan, the pioneer of object-oriented css, uses this:

    overflow: hidden; *overflow: visible; zoom: 1;

    **Method 2**

    Inuit.css uses a mix-in that generates before and after pseudo elements


    content:” “;


    Twitter Bootstrap uses the same thing (except it adds a line-height for opera)

    .clearfix {
    *zoom: 1;
    &:after {
    display: table;
    content: “”;
    // Fixes Opera/contenteditable bug:
    line-height: 0;
    &:after {
    clear: both;

    **Which do you prefer?**

    The second method seems more bloated and I am not sure if it would work in Internet Explore 7 due to the display: table property. The first method is more concise but that doesn’t mean its better.

    # January 25, 2013 at 7:56 pm

    I usually use this one:

    ::after {
    clear: both;
    display: block;
    content: “”;

    In the event that I have already used up my `::after` pseudo-element, or I need to support ancient browsers, I would use `overflow: hidden;` or `overflow: auto;` depending on the situation.

    # January 25, 2013 at 9:31 pm

    This reply has been reported for inappropriate content.

    This is word. Overflow hidden is the best. In rare cases it can’t be used use how rosspemen showed. If you want to support ie6 and 7 then just use the full clearfix

    # January 26, 2013 at 12:31 am

    This reply has been reported for inappropriate content.

    Overflow hidden is awesome, but if it can’t be used and you are using SASS/Compass, just use the Compass utilities clearfix.

    .some-div { @include pie-clearfix; }

    Then there is no need to add extra classes or elements like a lot of people do.

    # January 30, 2013 at 11:57 am

    I guess my follow up question is: Is there a place you can recommend with global statistics on browser usage? This company is not running any type of analytic program and I would like to keep the size of the file down.

    # January 30, 2013 at 1:00 pm

    I have this in my stylesheet:

    .group:after {
    content: “”;
    display: table;
    clear: both;
    visibility: hidden;

    Then I just add the class “group” the the element to have it clear (don’t use Compass).

    Just my 2 cents.

    # January 30, 2013 at 1:25 pm

    This reply has been reported for inappropriate content.

    FYI the only way overflow hidden would do anything is if you gave it a demention. You don’t need it anyway

    # January 30, 2013 at 2:40 pm

    Thank you for all your help everyone. It is much appreciated.

    # January 30, 2013 at 2:52 pm

    @Eric, ??

    # January 30, 2013 at 5:23 pm

    This reply has been reported for inappropriate content.

    @wolfcry911 yes and. I was talking about Magnus post

    # January 30, 2013 at 5:51 pm

    you don’t need to give it a dimension for overflow: hidden to work

    # February 6, 2013 at 7:13 am

    Make css as below:


    After completion of any floating div, call clear div…

    # February 6, 2013 at 7:22 am

    I use the same technique as pratikbhatt2009, apart from semantics of having empty divs is there anything wrong with this?

    Always curious to know best practices

Viewing 13 posts - 1 through 13 (of 13 total)

You must be logged in to reply to this topic.

There's a whole bunch of content on CSS-Tricks.

Search for Stuff   •   Browse the Archives

Get the Newsletter ... or get the RSS feed