最近のブラウザだったらこれでいいらしい!
element{ /zoom : 1; }
element:after{ content : ''; display : block;
clear : both; }
http://www.yomotsu.net/wp/?p=561
floatしたボックスは、本来あるべき場所から飛び出るので、同階層に他に内容がなければ、親の見た目が空になってしまう。よって、borderがうまくつけられない。
clearfixとはそれを防ぐtipsのこと。
HTMLでfloatしたボックスの次に何か要素を入れればいいのだけど、HTMLに余分な要素が入るのはスムーズな解決ではない。そこで、このclearfixではcssのafter擬似要素を使って要素を追加している。
IE対応でzoom入れてるけどどういう効果なんかはよくわからない
.clearfix{
zoom:1;/*for IE 5.5-7*/
}
.clearfix:after{/*for modern browser*/
content:".";
display: block;
height:0px;
clear:both;
visibility:hidden;
}
* html .clearfix{
display:inline-table;
/*\*/display:block;/**/
}
これを親要素につける
http://archiva.jp/web/html-css/clearfix.html
http://norisfactory.com/stylesheetlab/0000...