clearfixとはfloatをクリアするためにHTML側に特別な要素を追加することなく、かつ指定した要素の最後の位置でfloatをクリアした状態にするために考えだされた裏技です。以前「段組するとFirefoxで背景が出ない」でも紹介した方法はこのclearfixとほぼ同じ要領と思います。なのでclearfixを指定することで親要素がfloatを指定した要素全体を含むようにもなります。もう空のdivとかを入れなくて済んだりします。
では実際にclearfixはどのような指定をしていくのかを説明します。
CSS
[css]
.clearfix:after{ /* contentプロパティに対応したブラウザ向け */
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix{ display: inline-block; } /* IE7とMac IE5向け */
/* Hides from IE-mac \*/
* html .clearfix { height: 1%; }
.clearfix { display: block; }
/* End hide from IE-mac */
[/css]
では一つずつ説明します。
まず一番上のcontentプロパティに対応したブラウザ向けではどのようなことを指定しているか。clearfixを指定した要素の内容の最後にテキスト「.」を追加しなさいと指定してます。次にそこをブロック要素としなさい。高さは0で、floatをクリアしなさい。最後に見えないようにしなさい。
次に真ん中を飛ばして、最後の指定部分を見てみます。これはWindows版IE6以前の対策にホリー・ハックを使用しています。ここではfloatの解除はしていませんが、これで親要素がfloatしている要素全体を含むボックスになります。
最後に真ん中の一行の指定です。これはIE7とMac IE5向けの指定になります。この指定で親要素がfloatしている要素全体を含むボックスになります。ただしここで指定しているのは普通のクラスに指定していますので、他のブラウザも「display: inline-block; 」になります。
そこでホリー・ハック内のもう一度「display: block;」と指定しなおします。ホリー・ハックはMac IE5は無視するので、これで思い通りの指定になります。
これはかなり使い道があります。実際にこれを知る前は空のdivなどを使ったり、色々と指定をしてみたりと大変でしたが、これからは余計な要素を追加することもなくfloatを解除できるのは本当にうれしいですね。
それにしてもよくぞこんなものを思い浮かんだ人がいると思いますよ。頭よすぎる・・・私には絶対に生み出せないものですよ。まずcontentプロパティを使う時点で着眼点が違っていました。