Grow your CSS skills. Land your dream job.

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

    .cf{
    zoom:1;

    &:before,
    &:after{
    content:” “;
    display:table;
    }

    &:after{
    clear:both;
    }
    }

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

    .clearfix {
    *zoom: 1;
    &:before,
    &:after {
    display: table;
    content: “”;
    // Fixes Opera/contenteditable bug:
    // http://nicolasgallagher.com/micro-clearfix-hack/#comment-36952
    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 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

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

    # January 30, 2013 at 1:25 pm

    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

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

    .clear{clear:both;}

    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.

*May or may not contain any actual "CSS" or "Tricks".