Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS What is the best way of clearing floats in css?

  • This topic is empty.
Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • #42254
    fuqlibs
    Member

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

    #122351
    rosspenman
    Participant

    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.

    #122849
    fuqlibs
    Member

    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.

    #122857
    magnus_vb
    Member

    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

    #122865
    fuqlibs
    Member

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

    #122867
    wolfcry911
    Participant

    @Eric, ??

    #122883
    wolfcry911
    Participant

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

    #123554

    Make css as below:

    .clear{clear:both;}

    After completion of any floating div, call clear div…

    #123555
    darrylm
    Member

    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 9 posts - 1 through 9 (of 9 total)
  • The forum ‘CSS’ is closed to new topics and replies.