(New) Clearfixハック

(New) Clearfixハック

 .clearfix:after {
	visibility: hidden;
	display: block;
	font-size: 0;
	content: " ";
	clear: both;
	height: 0;
	}
* html .clearfix                { zoom: 1; } /* IE6 */
*:first-child+html .clearfix　  { zoom: 1; } /* IE7 */ 

Clearfixハックは、

    <div class="clear"></div>
    <br clear=both />

というように、余計なマークアップをしなくとも、floatをクリアできる。
数年前から有名なハックだが、もはやMac IEを使っているユーザはいないだろうということで、
Mac IE用の記述を除いたものを紹介。

The New Clearfix Method • Perishable Press

Example

HTML

<div class="parent clrearfix">
	<div class="children">float: left</div>
	<div class="children">flaot: left</div>
</div>