WEBサイトを制作していくと、必ずバグにあたります。対応させるブラウザが多ければ多いほどその可能性は多く、IEとfirefoxの二種類にしぼってもバグはでてしまいます。レイアウトをする時にfloatを使うとバグがでます。そして、回避の一つとしてclearfixという考え方があるのでこのクラスについて少々個人的意見を書いて行きたいと思います。

clearfixって何？

そもそもclearfixって何？と思っている方もいるかもしれませんが、http://www.css-designsample.com/csslayout/float-clearfix.htmlのページを見ていただければと思います。※リンク先はlogwとは一切関係ありません。
リンク先にもかいてるように、clearfixというのはfloatを解除するための手法の一つです。

floatが解除できないと困る問題

floatを使用して解除できないと、firefox等では親要素内のボックスが高さを持たなかったり背景画像が表示されなくなると言ったことが起きます。floatで回り込みをしている場合は、解除したい時に解除できないと回り込んで文章がいくのでデザイン上崩れてしまい厄介な事になります。そこでそれを回避するためにclearfixというのを使います。クラス要素で指定するだけでfloatを解除できるというもので、多くのサイトでも取り入れられている手法です。

実際にサイト制作に携わっている人はこのfloatタグを多用している人はいると思います。floatを使い回り込みをさせることでサイトのレイアウトができるからです。floatを使うとちょっと別なバグもでてきますが、それはここでは記述はしてはいないです。

このfloatを解除する時にclearfixを使いますが、僕はこのタグを好みません。

clearfixは本当に必要か？

僕がclearfixを好まない理由は、一つはclear:both;と指定してfloatを解除できる事にあります。全てこれだけでいけるとは限らないかもしれません。しかし、floatを解除するという意味では同じだし、HTMLにclass="clearfix"という記述が必要なくなります。ソースに余分なのがなくなります。

上の理由はソースの事なので人によっては手間ではないしあってもいいという意見もあります。なにより、僕は本当にclearfixが必要なレイアウトやコーディングをした事がないからいえるのだという意見も出ると思います。僕がclearfixを好まないのはもう一つ理由があります。

CSSハックの一種

clearfixというのは、CSSハックなのかそうではないのかを以前調べました。サイトを見ると半々というかCSSハックと書いてあるとこもあればうやむやでCSSの一種とかハックとかいっていないサイトが大半です。CSSハックと考えるのが1サイトだけとか、2サイト等数が少ない訳でもないので、恐らくCSSハックに部類されると思っています。

CSSハックはブラウザのバグを逆手に取って使う手法です。CSSがやり始めた2000年代や780pxの時代のレイアウトならまだわかります。近年ではブラウザも進化してきて解釈が変わったり、大型レイアウトで900px以上のレイアウトになり比較的デザインもしやすくなっているのが現状です。780pxの時と比べれば比較的デザインもしやすいこの時代に、まだCSSハックという存在が本当に必要かと思います。

IE6の対応にしても、バグはある程度でているので調べればどんなバグがあるのかもわかります。CSSハックではなく条件付きコメントCSSで対応した方がいいという声もあります。Apple等の大手サイトもIE用に条件付きコメントCSSで対応していてCSSハックは使っていません。clearfixがCSSハックの一種になるのなら、僕はそれを推奨して使うとか自慢しながら使うのは制作者としてどうなんだろうって思っています。

float意外にも手法はある

例えば、float以外はデザインの方法がない。float以外解決法が無いとなればfloatを使います。だからといってclearfixを使わなくてもclear:both;で対応できる可能性は十分にあるとおもいます。それをせずにclearfixに頼るのは得策とは思えません。
そして、floatを使わなくてもinlin-block等でも横並びのレイアウトができます。CSS3が正式になればより多くのプロパティが使えるようになるのでデザインの幅も広がると思います。そんな中、まだハックに頼っていてそれを自慢げに話す制作者の人はどうでしょうか。

備考

ブラウザのバグを利用して早く作っている。確かに仕事としては効率的かもしれないし早くできるし楽かもしれません。けど僕はそういった人を凄いとは思えません。ブラウザのバグを使わずにレイアウトして作る人の方が1000倍凄いと思います。本当にCSSハックがまだ必要なのかどうかを一度考えるべきだとおもいます。CSSハックではなく条件付きコメントCSSで対応したほうが結果は同じでも、意味合いは全然違います。