S eda1a14b50ee24bcab19b62f40858e76 clearfix

最近のブラウザだったらこれでいいらしい!
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;/**/
}
これを親要素につける

left side
right side

http://archiva.jp/web/html-css/clearfix.html
http://norisfactory.com/stylesheetlab/0000...

もしかして

    他の人の「clearfix」

    S eda1a14b50ee24bcab19b62f40858e76

    無所属ソフトウェアエンジニア

    (1722words)

    最新

      最新エントリ

        関連ツイート