Koblentz氏から、シンプルなスタイルシートで書かれたモダンブラウザ用のclearfix最新版を紹介します。clerafix(IE6+)モダンブラウザ用のclearfix最新版clearfixとは「clearfix」とはフロートした要素が親要素からはみ出してしまう、親要素の背景が表示されないなどを回避するもので、当サイトでもいくつか紹介してきました。clerafix(IE6+)まずは、おさらい。Gallagher氏によるもので、2011年にリリースされました。{zoom:1;}IE6/7にも対応しているので、多くの制作者が利用していたと思います。browsers」がモダンブラウザ用として、それを更に改良した最新版です。旧IEには、フロートした要素がはみ出してしまったり、拡大・縮小時にレイアウトが重なってしまったりとIE独自のCSSのバグがいくつかあります。これは、IEのhasLayoutが原因のひとつとなっており、hasLayoutの値がfalseの場合に起きます。hasLayoutとは、オブジェクトがレイアウトを持っているかどうかを示すものです。hasLayoutの値をtrueにするにはいくつか方法があり、その中の一つに「zoom」に値を持たせることで実現できます。hasLayoutのバグはIE6/7のため、これは不要です。:before疑似要素は上のマージン相殺をモダンブラウザとIE6/7で同じにするためのものなので不要です。block;」で実装した例を見てましょう。HTMLはこんな感じで、親と子要素に上下マージンを指定します。table;」でマージンの相殺が期待通りではない原因はバグではなく、仕様です。block;」ベースのclearfixは期待通りのマージンです。table:古いOperaをサポート外にもし古いOperaをサポート外にするのであれば、contentの値の空白スペースを削除できます。