Which method of 'clearfix' is best?

Question

I have the age old problem of a div wrapping a 2 column layout. My sidebar is floated so my container div fails to wrap the content & sidebar.

<div id="container">
  <div id="content">
  </div>
  <div id="sidebar">
  </div>
</div>

There seem to be numerous methods of fixing the clear bug in FF:

<br clear="all"/>
overflow:auto
overflow:hidden

etc.

But in my situation, the only one that seems to work correctly is the <br clear="all"/> solution, which is a little bit scruffy. overflow:auto gives me nasty scrollbars, and overflow:hidden must surely have side effects. Also, apparently IE7 is supposed to not suffer from this problem due to its incorrect behaviour, but again, in my situation its suffering the same as FF.

Whats the most reliable/best practice method currently available to us?

Answer 1

Have you tried this:

<div style="clear:both;"/>

I haven't had any problems with this method.

Answer 2

I always use the following css:

.cleaner {
  clear: both;
  font-size: 1px;
}

Then in the page, under my floated elements, I use this:

<div class='cleaner'>&nbsp;</div>

There is a niftyer method described over at Pathfinder Development that removes the need for extra HTML in your pages.

/* float clearing for IE6 */
* html .clearfix{
  height: 1%;
  overflow: visible;
}

/* float clearing for IE7 */
*+html .clearfix{
  min-height: 1%;
}

/* float clearing for everyone else */
.clearfix:after{
  clear: both;
  content: ".";
  display: block;
  height: 0;
  visibility: hidden;
  font-size: 0;
}

In your HTML, you'd then use something like this:

<div id="container" class="clearfix">
  <div id="rail" style="float: left;"></div>
  <div id="content" style="float: left;"></div>
</div>

Answer 3

I've found a bug in the official CLEARFIX-Method: The DOT doesn't have a font-size. And if you set the height = 0 and the first Element in your DOM-Tree has the class "clearfix" you'll allways have a margin at the bottom of the page of 12px :)

You have to fix it like this:

/* float clearing for everyone else */
.clearfix:after{
  clear: both;
  content: ".";
  display: block;
  height: 0;
  visibility: hidden;
  font-size: 0;
}

It's now part of the YAML-Layout ... Just take a look at it - it's very interesting! http://www.yaml.de/en/home.html

Answer 4

The overflow property can be used to clear floats with no additional mark-up:

.container { overflow: hidden; }

This works for all browsers except IE6, where all you need to do is enable hasLayout (zoom being my preferred method):

.container { zoom: 1; }

http://www.quirksmode.org/css/clearing.html

Answer 5

Using overflow:hidden/auto and height for ie6 will suffice if the floating container has a parent element.

Either one of the #test could work, for the HTML stated below to clear floats.

#test {
  overflow:hidden; // or auto;
  _height:1%; forces hasLayout in IE6
}

<div id="test">
  <div style="floatLeft"></div>
  <div style="random"></div>
</div>

In cases when this refuses to work with ie6, just float the parent to clear float.

#test {
  float: left; // using float to clear float
  width: 99%;
}

Never really needed any other kind of clearing yet. Maybe it's the way I write my HTML.

Answer 6

Depending upon the design being produced, each of the below clearfix css solutions has it's own benefits.

---

Overflow Property

This basic method is preferred for the usual case, when positioned content will not show outside the bounds of the container.

http://www.quirksmode.org/css/clearing.html - explains how to resolve common issues related to this technique

.container {
    overflow: hidden;
    display: inline-block; /* Necessary to trigger "hasLayout" in IE */
    display: block; /* Sets element back to block */
}

Rather than using the display property to set "hasLayout" for IE, other properties can be used for trigering "hasLayout" for an element.

.container {
    overflow: hidden; /* Clearfix! */
    zoom: 1;  /* Triggering "hasLayout" in IE */
    display: block; /* Element must be a block to wrap around contents. Unnecessary if only using block-level elements. */
}

Another way to clear floats using the overflow property is to use the underscore hack. IE will apply the values prefixed with the underscore, other browsers will not. The zoom property triggers hasLayout in IE:

.container {
    overflow: hidden;
    _overflow: visible; /* for IE */
    _zoom: 1; /* for IE */
}

While this works… it is ideal not to use hacks.

---

":after" Pseudoclass

This older "Easy Clearing" method has the advantage of allowing positioned elements to hang outside the bounds of the container, at the expense of more tricky CSS.

http://www.positioniseverything.net/easyclearing.html

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

Answer 7

I'd float #content too, that way both columns contain floats. Also because it will allow you to clear elements inside #content without clearing the side bar.

Same thing with the wrapper, you'd need to make it a block formatting context to wrap the two columns.

This article mentions a few triggers you can use: block formatting contexts.

Answer 8

honestly; all solutions seem to be a hack to fix a rendering bug ... am i wrong?

i've found <br clear="all" /> to be the easiest, simplest. seeing class="clearfix" everywhere can't stroke the sensibilities of someone who objects to extraneous markeup elements, can it? you're just painting the problem on a different canvas.

i also use the display: hidden solution, which is great and requires no extra class declarations or html markup ... but sometimes you need the elements to overflow the container, for eg. pretty ribbons and sashes

Answer 9

I recommend using the following, which is taken from http://html5boilerplate.com/

/* >> The Magnificent CLEARFIX << */
.clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }
.clearfix { display: inline-block; }
* html .clearfix { height: 1%; } /* Hides from IE-mac \*/
.clearfix { display: block; }