floatによる回り込みを解除する方法の1つ「clearfix」について

floatによる回り込みを解除する方法の1つ「clearfix」について

初めてCSSを触ったときはfloatの概念を理解するまでに苦労しました。ギターで言う「Fのコード」に相当する必ず最初につまづくポイントが、CSSでは「float」っていうやつです。

今日はそのつまづきポイントのfloatを扱いやすくしてくれる救世主「clearfix」について。

「clearfix」とは

floatがやっかいだと感じるのは「なんか回り込んじゃう」とか「いつまでも回り込みが解除されない」とか「2カラムにした片方の背景が途中で途切れる」といった、いまいちよく分からない現象が起こることですよね。

これらは僕がよく苦しめられた現象です。
理屈を理解するまでの間は、不可解な現象としか思えないんですよね(^^;)

そのやっかいなことは「clearfix」っていうやつでやっつけられます。

「clearfix」とはfloatによる回り込みを解除するおまじないです。

僕が使ってるclearfixのソース紹介

僕が使ってるclearfixのソースはこれ。

.clearfix {zoom:1;}
.clearfix:after{
    content: "";
    display: block;
    clear: both;}

このソースはこちらの記事に書かれてたものです。2011年4月の記事ですが、僕はいまだにこの方法を使っています。

こっちの記事はもっと古いですが、上記のソースとだいぶ近い実験結果が出ています。

ざっと調べたところ、これらの記事より新しい記事ほどソースが複雑化してるんですよね。

なので、現状僕は紹介したソースを使ってますが、特に問題なく使えてます。

その他の方法

その他にもたくさんの方法がありまして、いろんなブログで紹介されてます。
こちらも併せて見てみるとより理解が深まりますよ。

最後に

clearfixを覚えるだけで、floatがものすごく扱いやすくなりますので、もしfloat周りでつまづいたら試してみてください!

ブロガーさんだったら、たとえばShareHTMLなどのブックマークレットで文章が回り込んじゃったりしたら、ちょろっと改造して全体をdivでくくってclearfixを使うと解決できます。

キーワード
WEBデザイン