CSS Hackz Series: Clearing Floats with the Clearfix Hack

I use the CSS clearfix hack on nearly all of my sites. The clearfix hack — also known as the “Easy Clearing Hack” — is used to clear floated divisions (divs) without using structural markup. It is very effective in resolving layout issues and browser inconsistencies without the need to mix structure with presentation. There are countless variations of the clearfix hack around the Web, and for some sad reason, I keep a file updated with all of them. Recent pruning of my clearfix collection yields two excellent float-clearing techniques:

First clearfix method: addresses several reported rendering and display bugs by declaring very small values for both font-size and height, while also declaring a zero line-height value. A little paranoid perhaps, but the unique declarations seem to have no unintended/negative side-effects. This method also targets IE exclusively for the inline-block declaration. Check it out:

/* effective yet slightly paranoid clearfix hack */
.clearfix:after {
	visibility: hidden;
	font-size: 0.1em;
	display: block;
	line-height: 0;
	height: 0.1px;
    	content: " ";
	clear: both;
	}
* html .clearfix { display: inline-block; }

/* hide from ie mac \*/
* html .clearfix { height: 1%; }
.clearfix { display: block; }
/* end hide from ie mac */

Second clearfix method: highly refined version of the original clearfix hack (404 link removed 2013/03/03) by yours truly. This slightly enhanced, universal clearfix hack avoids unnecessary declarations and is perfect for clearing floats virtually anywhere and everywhere. I use this exact code on many different sites:

/* slightly enhanced, universal clearfix hack */
.clearfix:after {
	visibility: hidden;
	display: block;
	font-size: 0;
	content: " ";
	clear: both;
	height: 0;
	}
.clearfix { display: inline-block; }

/* start commented backslash hack \*/
* html .clearfix { height: 1%; }
.clearfix { display: block; }
/* stop commented backslash hack */

Next up..

Next in the CSS Hackz Series: Targeting and Filtering Internet Explorer 7! Stay tuned!