floatによる回り込みを解除する方法の１つ「clearfix」について
【追記】紹介していた「float解除の決定版。clearfixを考えたら、進化した。 : Web Design KOJIKA17」・「-float(フロート)を解除する3つの方法-Whisper | Diary」・「floatしたボックスの回り込みを解除する方法 – CSSデザインノート」は現在閲覧できず、同じ内容の移転先や適切な代替先も確認できないため、リンクを外しました。紹介内容は記事執筆時の情報です。
初めて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を使うと解決できます。
