Forums

fuqlibs

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.

rosspenman

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.

Eric

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

scottnix

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.

fuqlibs

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.

magnus_vb

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

Eric

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

fuqlibs

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

wolfcry911

@Eric, ??

Eric

@wolfcry911 yes and. I was talking about Magnus post

wolfcry911

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

pratikbhatt2009

Make css as below:

.clear{clear:both;}

After completion of any floating div, call clear div...

darrylm

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

treehouse : what would you like to learn today?

Forums

[Solved] What is the best way of clearing floats in css?