通常、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の使い方には留意した方が良さそうです。
07/04/01追記：
clearfixがハックなのかどうなのか？
っていうトークをしてて、
ボクは「仕様通りの事をしてても、特定のブラウザを意図した表示にさせる方法」みたいなのをハックとして読んでて、
相手は「仕様通りの事に関してはハックというのはおかしいんじゃないか？」
と意見がズレてました。
まぁどっちでもいいんすけど、一応clearfixに関してはハックという言葉ははずしておきました。
そうなると子セレクタを利用したってのは、ぜんぜんハックでもなんでもないんですよね。
ボクの場合は、IE6に言う事をきかせる手法という感じなんでそういってますが。
まぁ子セレクタに関してのエントリーは、自分でも別にハックじゃないよなーとか思ったりしながら書いてました。
お近くの人と議論になった際には、「どっちでもええやん」か「確かにそうですよね」辺りでいいかなぁと。
いまさらカテゴリを移動するにも適所が見つからないので、このままでいきます。