今更ながらの clearfix ネタ。構造に大きく手を加えずに float を clear させるためのいわゆる clearfix というテクニックですが、色々とバリエーションが派生してしまったせいか、いまだに Internet Explorer 7(IE7)に未対応なままのソースも良くみかけます。

　先日、Internet Explorer 8(IE8)ベータ版での動作検証を行う機会があったので、その際確認のとれたIE7,8にも対応する clearfix をば。

/* for modern brouser */
.clearfix:after {
	content: ".";
	display: block;
	clear: both;
	height: 0;
	visibility: hidden;
}
.clearfix {
	display: inline-block;
}
/* Hides from IE-mac \*/
* html .clearfix {
	height: 1%;
}
.clearfix {
	display: block;
}
/* End hide from IE-mac */

　display が inline-block なのがミソですね。