はじまりはじまり。
clearfixの使い方
以前、floatで崩れた？コレでなおせ！という記事でfloatによるレイアウト崩れの対処方法をご紹介しました。そこでは、overflowプロパティを使った方法を取り上げましたが、clearfixはさらっとスルーしたので、改めて見てみたいと思います。
clearfixとは
まずclearfixとはテクニックにつけられたただの通称であって、そのようなセレクターやプロパティがあるわけではありません。
clearfixはfloatによって親要素の高さが足りなくなる、またはなくなってしまったときに、高さを元に戻すために使います。
clearfixの意味
clearfixのコード自体は検索すればいくらでもでてきます。バリエーションも様々ですが、今回はスタンダードと思われるものを取り上げて、そのコードの意味を解説します。
/* afterに対応したブラウザ向け */
.clearfix:after {
content: ".";
display: block;
clear: both;
height: 0;
visibility: hidden;
}
/* IE6 */
* htm .clearfix {
height: 1%;
}
/* IE7 */
*:first-child+html .clearfix {
height: 1%;
}
ポイントはafterに対応したブラウザ向けの部分です。
after疑似要素はIE8以上、firefoxやsafari、chrome等の標準仕様に準拠したブラウザーで使えます。
afterとcontentプロパティを使って「高さが足りない／なくなっている要素の直後に文字（ピリオド）を追加」します。その文字をdisplayプロパティでブロックレベル要素の様に表示します。そこでclearをするという寸法です。つまりclearできる要素がないなら追加してしまうという考えなのですが、HTMLのソースコードを汚さずに解決できます。
この例では汎用性をもたせるために.clearfixというクラスセレクターで適用していますが、たとえば#contents:afterというようなピンポイントな書き方もできます。
ですが、これだけではafterが使えないIE6や7では解決できません。そこで、IE6と7向けにはハックが必要になります。ハックの内容は正直おまじない的なものですが…IEのバグを使った裏技です。
その他のバリエーションとしてはMac版 IEを考慮したものもありますが、シェアとしてはもう無視してもよいのではないかと思います。
では次回もお楽しみに。
