石輪っぷり!

なぜかというと、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日
これより簡潔な方法がありました。詳しくはこちらに書いています。