tochioもう一度、「clearfix」について考えてみた。
以前、「「clearfix」についてちょっと考えてみた。」という記事を書きましたが、 その時は、「「clearfix」はどこでどんなことををしているのか」についてのみ触れましたので、 今回はclearfixのバリエーションについてです。
■おさらい：初めて「clearfix」というclass名が使われたもの（2004/5/14）
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix {display: inline-table;}
/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */
懐かしのIE5やNetscape等にも対応しているので、かなり冗長な印象です。
■micro clearfix
2011年の4月に登場したのが「micro clearfix」です。 モダンブラウザのほか、「:after」に対応していないIE6・IE7でも使用できるよう、 「zoom: 1;」を入れてhasLayoutを有効にしています。
/* For modern browsers */
.cf:before,
.cf:after {
content: " ";
display: table;
}
.cf:after {
clear: both;
}
/* For IE 6/7 only */
.cf {
*zoom: 1;
}
■さらにコンパクトなclearfix
IE6・IE7のシェアが下がり、ターゲットブラウザから外れることが増えてくると、 それらのブラウザを考慮しない、micro clearfixよりもさらにコンパクトなclearfixの記述も 増えてきました。
.clearfix:after {
content: "";
clear: both;
display: block;
}
IE6・IE7を考慮しない=hasLayoutを有効にする必要がなくなったので、 「zoom: 1;」の記述がなくなりました。 もしIE6・IE7がターゲットブラウザに入っているのであれば、 hasLayoutを有効にしておかなければならないので、 このようなシンプルな記述は避けなければなりません。
■htmlに「class="clearfix"」を記述しないclearfix
floatする要素の親要素になることが多いdivやulに対して、 css内部であらかじめclearfixを設定してしまう、という方法です。
div:after,
ul:after {
content: "";
display: block;
clear: both;
}
「divとulの直後でfloatを解除」と「divとulにclass="clearfix"を記述してfloatを解除」は 同じ意味を持つので、html上で親要素に「class="clearfix"」と記述しなくても、 floatが解除されます。 疑似要素「:after」は、IE6・IE7では未対応でしたが、それらがターゲットブラウザに入ることが ほぼなくなったため、最近はこういった方法をとることが多いように思います。 この方法だと、clearfixを入れるのを忘れることもなくなるので、安心安全でもありますね。
■番外編（？）：overflow: hidden;でclearfix
親要素のoverflowプロパティの値にvisible以外のものを指定すると、 親要素は、floatされた子要素の高さを認識するようになるため、 「class="clearfix"」を使った時と同じ効果が得られます。 overflowプロパティに入れる値をautoやscrollにしても同じですが、 ブラウザによってはスクロールバーが出てしまうなどの現象が起こるため、 「overflow: hidden;」を入れるのが一般的なようです。
#wrap {
overflow: hidden;
zoom: 1;
}
.contents {
float: right;
}
.menu {
float: left;
}
overflowプロパティが効かないIE6・IE7に対応するために、 親要素に「overflow: hidden;」とともに「zoom: 1;」を入れて hasLayoutを有効にしています。 最近はあまり見かけない方法ではないかと思います。
clearfixは、ブラウザのシェアが変わるにつれて、不要な記述を削除することで、 よりシンプルなものへと変化してきています。 3年後、5年後には、まったく違った形のclearfixが登場しているのかもしれません。
【参考サイト】
