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自体にはいろいろバリエーションがあります。

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

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

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

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

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

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