WebページをフルCSSでレイアウトする際に、ブラウザ特有のバグ（特にInternet Explorerが酷い）によってレイアウトが崩れることを回避するために様々な裏技が使われています。

一方、これはバグではなく CSS 2.0の仕様なのですが、floatさせた要素の高さが回り込んだ要素の高さより大きい場合や、ボックス内の最後の要素がflort指定されている場合など、floatさせた要素が親ボックスからはみ出てしまいます。

そこで、これを回避するために使われている裏技が、How To Clear Floats Without Structural Markup で解説されている方法です。
簡単に説明すると、:after擬似クラスで高さ0の要素を追加してfloatをクリアし、:after擬似クラスに対応していないIEに対しては、Mac版とWindows版それぞれに対応した裏技を組み合わせているわけで、このサイトでも何ヵ所かに使っています。

ところが、これが次期IE7にはこのまま使えません。

なぜかというと、IE7はIE6までに対応していなかったいくつかのCSSの仕様に対応しているのですが、肝心な:after擬似要素には相変わらず対応していないことと、IEにのみ適用させるための裏技であったスターハック（セレクタの前に「* html」を追加する記述）がIE7では無視されてしまうからです。

そこで、IE7での解決方法を探していたところ、親ボックスに「min-height: 1%;」のスタイルを設定すればよいことがわかりました。
つまり、

.clearfix:after {
    content: "."; 
    display: block; 
    height: 0; 
    clear: both; 
    visibility: hidden;
}
.clearfix {
    display: inline-table;
    min-height: 1%;
}
/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */

と書けば解決できるわけですね。
ちなみに、「min-height」はIE6までは対応していなかったプロパティです。

それにしても、IE7の中途半端な改善でますますCSSが複雑になるなあ。

2007年1月31日
これより簡潔な方法がありました。詳しくはこちらに書いています。