(CSS)floatは「回り込み」ではないことと、IE, Operaのバグ
floatは「回り込み」ではないが分かりやすかったので、それに従ってfloatの概念を振りかえってみました。
floatとは文字通り「浮く」というイメージで、さらに分かりやすくいうと
- フロートに重なるブロックボックスはフロートの背面に隠される（フロートの背景が透明なら、背面のブロックボックスが透けて見える）
- ただし、行ボックス（テキストの1行が入るボックス）はフロートと重ならないように幅が縮む
２番目の「テキストは幅が縮む」のがあたかも「回り込み」をしているように見えるのですが、ボックス自体は回り込まないのが正しい（「仕様書どおり」という意味。以下、「正しい」という言葉を同じ意味で使います）floatの理解だということが、Sample1で分かると思います。
======= Sample1 =======
CSS↓
#test20110627sample01 .aa {
width:50px;
height:50px;
background:#fcc;
float:left;
}
#test20110627sample01 .bb {
width:200px;
height:100px;
background:#ccf;
}
html↓
<div id="test20110627sample01"> <div class="aa">あいうえおかきくけこ</div> <div class="bb">さしすせそたちつてと</div> </div>
結果↓（ブラウザ依存）
↓↓ Firefox, Google Chrome, Safari, Lunascape ↓↓
↑これが正しい表示
↓↓ Opera ↓↓
↑Operaはボックスが「回り込んで」しまっています（バグ）
↓↓ IE ↓↓
↑さらにIEでは、ボックス間に隙間ができてしまっています。それに加え、「内容物に応じてボックスの幅・高さが押し広げられる」バグが見られます。この場合、ピンクのボックス(aa)の縦が50pxより大きくなっています。
普通は、上のOperaのような表示が欲しくてfloatを使うことが多いと思いますが、このブラウザ間の差異を解消するためには、紫のボックス(bb)の左にマージン（この場合、例えば50px）を与えてやれば、解消できます。
ただ、
ブログでよくあるような段組レイアウトを実現するためにfloatが使われていますが、これはフロートの振る舞いの厳密な規則にあるように、「左フロートにつづく左フロートは、先の左フロートより右側になければならず（右フロートの場合は左右逆に読み替え）、フロートは可能な限り上に配置しなければならない」という規則を利用しているのです。だから、左右のカラムの両方にfloatを指定するわけです。
とあるように、紫のボックス(bb)にもfloatをかけるのが一般的でしょう。すなわち、
======= Sample2 =======
CSS↓
#test20110627sample02 .aa {
width:50px;
height:50px;
background:#fcc;
float:left;
}
#test20110627sample02 .bb {
width:200px;
height:100px;
background:#ccf;
float:left;
}
html↓
<div id="test20110627sample02"> <div class="aa">あいうえおかきくけこ</div> <div class="bb">さしすせそたちつてと</div> </div>
結果↓（ブラウザ依存）
↓↓ IE以外 ↓↓
↑正しい表示
↓↓ IE ↓↓
↑この場合、ボックス間の謎の余白も消えます。ただし、「内容物に応じてボックスが押し広げられる」現象は依然として見られます。
なお、「さしすせそたちつてと」の部分をもっと長い文章にしたら、ピンクの下辺以下の表示は、Sample1では文字が左側に流れ込み（はみ出た「あいうえおかきくけこ」と重なる）、Sample2では長方形の領域に文字が埋まります。IE、Opera の場合はどちらも長方形で、IEではさらに、文字の長さ分に応じて紫色のボックスが広がります。
ここで、floatは「回り込み」ではなく「浮く」という意味に近い、ということを念頭に、
と予測できる、つまり height=0 になるはずですが、Opera と IE ではボックスに width を与えると float した要素に応じて height が生ずるというバグが見られます。
======= Sample3 =======
CSS↓
#test20110627sample03 .aa {
border:1px solid #c00;
width:300px;
}
#test20110627sample03 img {
float:left;
}
html↓
<div id="test20110627sample03"> <div class="aa"> <img src="http://static.zooomr.com/images/9981709_da89ac0c92_m.jpg"> <img src="http://static.zooomr.com/images/9981710_32a843d334_m.jpg"> </div> </div>
結果↓（ブラウザ依存）
↓↓ Firefox, Google Chrome, Safari, Lunascape ↓↓
↑これが正しい見え方。横幅300px、高さ0pxの赤い罫線が上に見えます。
↓↓ Opera ↓↓
↑Opera のバグ
↓↓ IE ↓↓
↑さらに IE では、画像周り（横方向）に余白が生じています。
ということで、float と仲良くするには「回り込みではない」という理解と IE のバグを知ることが大切になるのだと思いました。