使う機会は滅多に無いんだけど、知識として知ってないと困ったりしたので、取りあえず現在主流だろうブラウザのハックを自分のまとめ用に。

実際の状況を確認出来るように、デモページもご用意しました。
必要あるか分かりませんがダウンロードも出来るようにしときました。
拡張子がshtmlとかなってるので、htmlにして下さい。

• ハックのデモページ
• デモページのファイル一式ダウンロード(zip:14kb)

通常、floatさせている画像やボックスなどがある場合何らかの形でclearするか、その親要素にfloatを指定しないと、親要素からはみ出してしまいます。

コレはCSS2.0の仕様なんで正しい表示なんですが、どうしても親要素にfloatなどが使えず、やむなくclear:bothをbrなりdivにクラス指定して解決してたりって事があったかと思います。

IEの場合はwidth、もしくはheightを指定する事で解決できますが、コレはバグなんで他のモダンブラウザでは解決できません。

ソコでかなり便利に使えるテクニックが、clearfix。
使い方は、clearしたい親要素に下記のように記述。

div:after {
	content: ".";
	display: block;
	visibility: hidden;
	height: 0.1px;
	font-size: 0.1em;
	line-height: 0;
	clear: both;
}

IE7はコレに対応していないので、IE7用に、

div {
	display: inline-block;
}

と指定するか、IE独自拡張のzoomを使っても回避できます。

div {
	zoom: 100%;
}

:after擬似要素を利用してclearします。
コレ考えた人頭いいなーと思います。

とてもボクじゃ考え付かない...

そういえばclearfixとは直接関係が無いですが、height:1%を使いIE対策としてはみ出さないようにしたり、peek-a-booバグ対策でheightを指定している場合、IE7だとその辺修正されているので、場合によってはIE7だけすんごい事になっているかも知れません。

heightの使い方には留意した方が良さそうです。