1. TOPページに戻る
  2. CSS
  3. clearFixを使う

clearFixを使う

  • 2010年02月20日

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;
}