この記事に来た人はclearfixとoverflow:hiddenとは何かはご存知だと思います。
要は「HTMLの要素に指定されたfloatを解除する方法」ですね。
で、どっちを採用するべきかという話ですが、結論から言えば私はclearfix押しです。
overflowのいいところ
一行で終わり、クラス指定不要。
各クラスの中にoverflow: hidden;と書くだけです。
そのため、対象HTMLノードにclassを指定しなくてすむため、HTMLの構造が美しくなり、CSSの見た目にもシンプルなのが特徴です。
clearfixのいいところ
範囲外に要素を配置することが出来る。
clearfixのクラスの作り方によっては古いブラウザ（極端なこと言えばNN3とか）にも対応できるって言う利点もありますが、（私は）正直そんなブラウザもう完全に見限っているのでどうでも良いです。
要素外に配置とは、
#clearfix-no-node {
position:relative;
}
.outsider {
position: absolute;
width: 100px;
right: -100px;
}
みたいに書くやり方のことです。ページ上部に戻るボタンなんかがよくこういう配置をされているのではないでしょうか。
で、この配置のやり方はoverflow: hiddenだと、outsiderが隠れてしまう（非表示になる）ので使えません。
よって私は後から外に何かを配置したくなった時のことを考えてclearfix派です。
そしてclearfixをHTMLにつけるのが嫌だな、という時は、clearfixの定義をscssでmixin定義しておき、@includeします。
例）
@mixin clearfix {
&:after { //多分一番シンプルなclearfix
content: "";
clear: both;
display: block;
}
}
.target_selector {
@include clearfix;
.obj {
float: left;
}
}
こんな感じです。
cssが無駄に長くなるので、基本的にはこの書き方はしませんけどね。この辺は多分に好みなので、一緒に作業する人のコーディングの癖を最初に確認して、それに合わせて行っています。
コメント