Which method of ‘clearfix’ is best?

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

"Reloaded" clearfix

Thierry Koblentz’ of CSS Mojo wrote another article revisiting the clearfix, making a strong argument for dropping display: table in favor of display: block which has the advantage of not disabling margin-collapse between containers.

The latest micro-clearfix code is now:

.container:after {
  content:"";
  display:block;
  clear:both;
}

"Beat That ClearFix", a clearfix for modern browsers

Thierry Koblentz’ of CSS Mojo has pointed out that when targeting modern browsers, we can now drop the zoom and ::before property/values and simply use:

.container:after {
  content:"";
  display:table;
  clear:both;
}

This solution does not support for IE 6/7 …on purpose!

Thierry also offers: "A word of caution: if you start a new project from scratch, go for it, but don’t swap this technique with the one you have now, because even though you do not support oldIE, your existing rules prevent collapsing margins."

Micro Clearfix

The most recent and globally adopted clearfix solution, the Micro Clearfix by Nicolas Gallagher.

.container:before,
.container:after {
  content:"";
  display:table;
}
.container:after {
  clear:both;
}
.container {
  zoom:1; /* For IE 6/7 (trigger hasLayout) */
}

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, namely, setting width: 100% on the container.

.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" Pseudo-element

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;
}

Element using "clear" property

The quick and dirty solution:

<br style="clear:both" /> <!-- So dirty! -->

Using the clearing element solution is not ideal for many reasons:

• the main reason: you're putting presentation in your markup. This makes reusing the markup more difficult if you don't want the <br> style in another context where the same markup is used. CSS should be used to style the same markup differently in different contexts.
• doesn't add any semantic value to your markup,
• makes your code look un-professional, and
• in the future when other clearfix solutions are available you won't have to go back and remove all the <br> tags which are littered around in your markup.

• answered 8 years ago
• Gul Hafiz

/* >> 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;  
}

• answered 8 years ago
• Gul Hafiz