ページ

▼

2012/11/18

モダンブラウザのための最小clearfixハック

CSSハックの中でも最も有名で最も使われているのが clearfix だろう。
CSSハック嫌いの僕でも clearfix の有用性だけは認めざるを得ない。
それでもCSSハックは使いたくないのでできるだけ簡潔な表現にした。

ネタ元はこちら：A new micro clearfix hack – Nicolas Gallagher

IE6/7どころかIE8もサポートしない最強の clearfix である。
IE9 と Chrome, Firefox, Safari, Opera の最新版で動作することを確認済み。
.clearfix::after {
    content: "";
    display: table;
    clear: both;
}

ネタ元の以下の clearfix はIE6+をサポートするので困ったらコッチを使うと良い。
/**
 * A new micro clearfix hack – Nicolas Gallagher
 * http://nicolasgallagher.com/micro-clearfix-hack/
 */
.clearfix:before,
.clearfix:after {
    content: " ";
    display: table;
}

.clearfix:after {
    clear: both;
}

.clearfix {
    *zoom: 1; /* for IE 6/7 only */
}
ちなみにHTML5 Boilerplate: The web's most popular front-end templateでも使われている方法なので安心！