インラインボックスをfloat
overflow: auto;
浮動ボックスより、回り込む文字の部分の高さが低いと、外枠のブロックから浮動ボックスがはみだしてしまいます。IE6 IE7 は前ページに有るように、はみだしません。
浮動ボックスを含むブロックの高さを確保する方法として clearfix と呼ばれるテクニックがあります。例を示しておきます。そのほかにも clearfix で検索すればいろいろあります。
.clearfix:after {
content: ".";
display: block;
height: 0;
visibility: hidden;
clear: both;
}
他に
.clearfix:after {
content: "";
display: block;
clear: both;
}
庭で咲いていた鉢植えのバラ（二コール）です。
これは外ブロックの:after 擬似要素で、フロートを含む全てを書き終わった後で、高さが0の文字とか、実体のないヌル文字とかを、ブロック要素の clear: both 指定で、見えないように書き込むことで外ブロックの高さを確保するというものです。 （書いている本人も、なんのこっちゃ？と思ってしまう…）
さて今回使用するのはもっとかんたんな方法で、フロートボックスを含む外ブロックに overflow: auto または overflow: hidden を指定するだけです。
なぜ overflow: auto または overflow: hidden で外ブロックの中に浮動ボックスが入って、高さが確保されるのでしょう。
「CSS2.1の視覚整形モデル詳細」 の 「10.6.6 そのほか雑多な事例」 と 「10.6.7 ブロック整形文脈ルートにおける 'auto' の高さ」から要約すると次のようになります。
ブロック要素は overflow が visible 以外であるとき、その子孫フロートボックスがはみ出しているなら、フロートボックスの辺を含むように高さが広げられる。
これで十分ですよね。IE6 以上 Firefox, Opera, Safari で対応しているようです。
