clearFixを使う

CSS

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