clearFixを使う

floatをクリアし、高さもとってくれる「clearFix」。いつも検索してコードを持ってくるのでここにメモです。
フロートしている親要素に指定します。

clearFix:after{
content:".";
display: block;
height:0px;
clear:both;
line-height:0;
visibility:hidden;
}
.clearFix {
zoom:1;
}

:afterの部分がモダンブラウザ用で、zoomを使用しているのがIE用です。

これをcssで読み込んでおけば、運用の際にclassを付けるだけでよく、無駄なタグも増えなくて済みます。
ただそうするとclass=”clearFix”ばかりになってしまうこともあるので、対象となるセレクタをもってきて使用する方法もあります。

#header:after,
#content:after {
content:".";
display: block;
height:0px;
clear:both;
line-height:0;
visibility:hidden;
}
#header,
#content {
zoom:1;
}

関連記事:

コメント