【CSS 中級講座】floatを解除するclearfixのビューティフルな実装法さて【CSS 中級講座】シリーズ第２弾は、CSSコーディングには必携の知識「clearfix」について。 なんらかの要素を float した場合、しっかりそれを解除しないと続く要素にも影響しちゃって、レイアウトが崩れてしまいます。 そんな困った時に使われる「float状態を解除する方法」を通称して「clearfix（クリアフィックス）」と呼ぶのですが、実はいろいろな方法があります。 有名所としては「:after疑似要素 + contentプロパティ + IE用ハック」ってのがありますが、そんな手間をかけずとも、もっとシンプルにfloat解除する方法、あります！ そんな訳で、さっそくいってみましょー！ 実装前の状態 まず最初に、clearfixを使う前の「レイアウト崩れてもうた」状態のマークアップをば。 <div id="contents"> <div id="main"> <p>ここは<b
