Lepracaun's factory: clearfixのバリエーション

« Adobe Flash CS3 詳細! ActionScript 3.0 入門ノート | メイン | clearfix：overflowを使用した解決方法 »

2007年8月19日

clearfixのバリエーション

CSSで2カラムレイアウトした際に生じるfloatに関する問題について。
親ボックスの中にサイドバー部分をfloat:leftさせ、コンテンツ部分をfloat:rightさせたとします。
すると、中身のボックス（サイドバー部分、コンテンツ部分）の高さが親ボックスに反映されません。
親ボックスに背景を敷いていた場合、中身のボックスが親ボックスをはみ出してしまいます。

そこで編み出されたのがclearfixという方法。
本家はPosition Is Everythingというサイトで、その中のHow To Clear Floats Without Structural Markupという記事で紹介されています。

IE6以降、Firefox、Safari、Operaといったモダンブラウザだけならnorisfactoryの「clearfixの決定版を作る－モダンブラウザ編－」が、もっとも参考になるかもです。
ここで紹介されているCASE10でファイナルアンサーと言えると思います。

しかしながら、いまだIE5.0、MacIE5.2といったレガシーブラウザでCSSレイアウトを依頼してくるクライアントもいまだ後を絶ちません。
実際つい最近、IE5.0、MacIE5.2、Netscape7.1対応のフルCSSレイアウト移行案件がありました。
Win IE5.0やMac IEなどのテスト環境を揃えるだけで一苦労でした。

clearfixに関しては、本家以外にもいろいろな記述方法が発表されていますが、上記のレガシーブラウザ対応を考慮すると、実は本家が一番よく練られているのがわかりました。

ちなみに本家の記述方法は下記の通り。

.clearfix:after {
  content: ".";   display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}

/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */

clearfix自体にはいろいろバリエーションがあります。

■IE独自拡張zoomプロパティを使用

/* for modern browser */
.clearfix:after {
  content: ".";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}

/* for IE 5.5-7 */
.clearfix {
  zoom:100%;
}

※zoom:100%をzoom:1としているパターンもあります。
いずれにせよ、zoomプロパティはIE独自拡張のため、W3Cのバリデートに通りません。
便利ではありますがレギュレーションにマッチしないのでアウト。残念です。

■IE7対応版（本家にプラスアルファ）

/* for modern browser */
.clearfix {
  display: inline-block;
}

.clearfix:after {
  content: ".";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}

/* Hides from IE-mac \*/
* html .clearfix {
  height: 1%;
}
.clearfix {
  display: block;
}
/* End hide from IE-mac */

※本家のclearfixに追記してIE7対策を施したもの。
IE7が登場するまでは、最初のdisplay: inline-block;をdisplay: inline-table;と記述しているパターンが多かったようです。
レガシーブラウザもIE７も網羅するならこれでOKかと。

■content: ".";のピリオドはNetscape7.1以下用

content: ".";の箇所をcontent: "";（スペースなし）、content: " ";（半角スペース入り）としているバリエーションがあります。
結局これは、Netscape7.1を対象ブラウザとしているかどうかがポイントのようです。

■参考サイト
文中に紹介したサイト以外に参考となるサイトへのリンクを貼っておきます。

CSSでfloatを指定したボックスを含むボックスの背景が出なくなる件
→概念を図解で非常にわかりやすく解説されています。overflowを使った解決方法についても記述されていますが、その件に関しては別の記事で紹介します。

floatボックスが親ボックスを突き破る問題
→概念をわかりやすく解説されているサイト。ここでもoverflowを使った解決方法についても記述されていますが、その件に関しては別の記事で紹介します。

clearfixはちゃんと考えられていた
→content:プロパティになぜピリオドを入れているのか検証結果と見解が記載されています。

【IE7対応clearfix】さらに続報、コピペでつかえる主要ブラウザをclearするコード、[多分最終版]
→zoomプロパティというIE独自拡張を使ったclearfixを紹介されています。バリデーション通過を考慮しなければ良い方法かと。

「clearfix」のIE 7対策：その２
→IEの各バージョンに対応したclearfixのバリエーションを紹介されています。

clearfixを考えみた .1
→content:プロパティになぜピリオドを入れているのか検証結果と見解が記載されています。

俗に言う clearfix と言われるコードのバリエーション色々
→いろんなバリエーションの紹介とリンク先を記載されています。

floatさせたボックスが親ボックスからはみ出すのを回避する裏技のIE7対策（その2）
→IE7対応版を紹介されています。