floatさせている画像やボックスがある場合、何らかの方法でclearするか、親要素にfloatを指定しないと、その親要素からはみ出してしまいます。
Aだけが float: left; されているボックス。
BCはfloatが指定されていませんので、BC分の高さしか算出されない。
floatレイアウトの崩れを防ぐ方法に、フロートされたボックスの後に <div style="clear: both"></div> を使う方法などありますが、これはHTMLの中に余分なソースが入ってしまうのであまりよろしくないです。
そこで、CSS HappyLife さんで紹介されていた clearfix がかなり役立ちます。
div:after {
content: ".";
display: block;
visibility: hidden;
height: 0.1px;
font-size: 0.1em;
line-height: 0;
clear: both;
}
:after疑似要素とcontentプロパティで、div（divは任意の名前）内の末尾に新たなボックスを生成します。そのボックスを display: block; でブロック要素に変換します。visibility: hidden;、height: 0.1px;、font-size: 0.1em;、line-height: 0; はブラウザ間のずれを解消するための指定です。最後に clear: both; でブロック要素に clear指定します。
IE7には対応してないのでこれを別に追加で、
div {
display: inline-block;
}
これは display: inline-block; がWin版IEとOperaしか対応していないことを利用した指定です。
別の方法に、Mac IE用にHolly HackやStar Hackを使う方法もありますが、僕はこっちの方がすっきりしてていいかな。
&