親ボックスで子ボックスのfloatを解除 （clearfixのいろいろ） - Hato-Style - Note

親ボックスで子ボックスのfloatを解除 （clearfixのいろいろ） CSSレイアウトにおける、floatを良い感じにclearさせる俗に言うclearfixと言う手法がある。floatをclearさせるための要素が無い場合、clearさせるために要素（<br class="clear" />みたいな要素）を追加したりしなくても、floatされる要素を包含する親ボックスでfloatをclearしてしまうというスグレモノ。 仕組みは、FirefoxやSafariに代表されるモダンブラウザでは親ボックスで:after疑似要素を使うことで、clearさせる。 :after疑似要素に対応していないIE向けには、親ボックスに横幅（width）を入れることで解決。しかしこれだとMacIEで崩れるのでMacIEだけにHolly Hackなどを組み合わせてdisplay: inline-table

[psychedesire]

が一番楽。

[aoiasaba]

★clearfixの説明としては、一番わかりやすい。