clearfixの最新版 -フロート関連やマージン相殺の不具合を解決するモダンブラウザ用clearfix

米Yahoo!のフロントエンド エンジニア: Thierry Koblentz氏から、シンプルなスタイルシートで書かれたモダンブラウザ用のclearfix最新版を紹介します。

The very latest clearfix reloaded

• clearfixとは
• おさらい: micro clerafix(IE6+)
• モダンブラウザ用のclearfix最新版

clearfixとは

「clearfix」とはフロートした要素が親要素からはみ出してしまう、親要素の背景が表示されないなどを回避するもので、当サイトでもいくつか紹介してきました。

おさらい: micro clerafix(IE6+)

まずは、おさらい。
micro clearfixは、normalize.cssのNicolas Gallagher氏によるもので、2011年にリリースされました。

IE6/7にも対応しているので、多くの制作者が利用していたと思います。

micro clearfix解説記事

• スタイルシートの量を少し減らした、新しいclearfix -micro clearfix

モダンブラウザ用のclearfix最新版

micro clearfixの翌年に「clearfix for modern browsers」がモダンブラウザ用として、それを更に改良した最新版です。

「zoom:1;」と「:before」が不要な理由

旧IEには、フロートした要素がはみ出してしまったり、拡大・縮小時にレイアウトが重なってしまったりとIE独自のCSSのバグがいくつかあります。
これは、IEのhasLayoutが原因のひとつとなっており、hasLayoutの値がfalseの場合に起きます。hasLayoutとは、オブジェクトがレイアウトを持っているかどうかを示すものです。hasLayoutの値をtrueにするにはいくつか方法があり、その中の一つに「zoom」に値を持たせることで実現できます。
hasLayoutのバグはIE6/7のため、これは不要です。

:before疑似要素は上のマージン相殺をモダンブラウザとIE6/7で同じにするためのものなので不要です。

「display: block;」にした理由

兄弟のボックスを「display: table;」ベースのclearfixと「display: block;」で実装した例を見てましょう。

HTMLはこんな感じで、親と子要素に上下マージンを指定します。

左の「display: table;」でマージンの相殺が期待通りではない原因はバグではなく、仕様です。「display: block;」ベースのclearfixは期待通りのマージンです。

display: table;とdisplay: block;の比較
参考: clearfix with display: block VS. display: table:

古いOperaをサポート外に

もし古いOperaをサポート外にするのであれば、contentの値の空白スペースを削除できます。