要するに、ボックスをフロートしてしまうと、親要素の高さはフロートしたひとつめのボックス分しか数えない。親ボックスを閉じる直前にclearするといいってことなんだけど、それだと、余分にタグをつける必要があるし．．．まだまだ勉強中の自分にとってはcssによる高さの表現はすごくやっかいで、webでこいつを見っけたときには感動・・・いつも使ってます。IE7はどうなんですかね。検証しなきゃ。構造のマークアップなしでフロートをクリアする方法で詳しい解説がされています。
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix {display: inline-table;}
/* Hides from IE-mac ¥*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */
これをつかっていて、IE7でバグが出たんで、バージョンアップしました。
.clearfix{
zoom:1;/*for IE 5.5-7*/
}
.clearfix:after{/*for modern browser*/
content:".";
display: block;
height:0px;
clear:both;
visibility:hidden;
}
.clearfix {display: inline-table;}
/* Hides from IE-mac ¥*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */
これが最終版ですね。【IE7対応clearfix】さらに続報、コピペでつかえる主要ブラウザをclearするコード、[多分最終版]からの情報です。
Lisence
