あるページをコーディングしていて、フロートした子要素を内包する親要素の背景画像がブラウザによっては、消えてしまうというバグ？に遭遇しました。よく調べてみると、このケースでは、消えてしまうのが正しい振る舞いで、見えることのほうがバグでした。
以下は、そのバグの内容を再現（簡略的に）するため、froat要素の振る舞いを検証してみた覚え書です。内容が「floatを利用した際の解釈の違い（1）」と一部重複しています。
→floatを利用した際の解釈の違い（1）
以下は、そのバグの内容を再現（簡略的に）するため、froat要素の振る舞いを検証してみた覚え書です。内容が「floatを利用した際の解釈の違い（1）」と一部重複しています。
→floatを利用した際の解釈の違い（1）
（1）親要素（幅650px、padding:5px、text-align:left、backgroundに画像を指定）の中に、幅100px、高さ50pxの子ボックス（オレンジ色border）と、それに続くテキストを入れています。テキストは、その量とは無関係に子ボックスの下に回ります。
フロート：無し
サンプルテキストひらがなサンプル漢字サンプルサンプルテキストひらがなサンプル漢字サンプルサンプルテキストひらがなサンプル漢字サンプルサンプルテキストひらがなサンプル漢字サンプルサンプルテキストひらがなサンプル漢字サンプルサンプルテキストひらがなサンプル漢字サンプルサンプルテキストひらがなサンプル漢字サンプルサンプルテキストひらがなサンプル漢字サンプルサンプルテキストひらがなサンプル漢字サンプルサンプルテキストひらがなサンプル漢字サンプル
（2）上と同じもので、子ボックスをフロートさせると、テキストは、子ボックスの横の空きを隙間なく埋めます。
フロート：左
サンプルテキストひらがなサンプル漢字サンプルサンプルテキストひらがなサンプル漢字サンプルサンプルテキストひらがなサンプル漢字サンプルサンプルテキストひらがなサンプル漢字サンプルサンプルテキストひらがなサンプル漢字サンプルサンプルテキストひらがなサンプル漢字サンプルサンプルテキストひらがなサンプル漢字サンプルサンプルテキストひらがなサンプル漢字サンプルサンプルテキストひらがなサンプル漢字サンプルサンプルテキストひらがなサンプル漢字サンプル
（3）テキストの量を減らすと、フロートした子ボックスを内包している親要素は、テキストに合った高さになり、子ボックスは下にはみ出します。
フロート：左
サンプルテキストひらがなサンプル漢字サンプルサンプルテキストひらがなサンプル
（4）テキストをすべてなくすと、フロートした子ボックスを内包している親要素は高さを失い、padding分の10px（上下各5px）になります。
フロート：左
（5）さらに、paddingを0にすると、2pxのhrのようになります。borderの指定がなければ、この横線さえも見えません。遭遇した症状は、この状態でIE8やFirefoxで背景画像を表示するための工夫が施されていて、逆にIE7以下では見えなくなってしまうものでした。
フロート：左
（6）正しい解釈で、かつ背景が見えるようにする：（3）と同じものです。内包するテキストの最後部でclear:leftをしています。親要素は子ボックス分の高さを得ます。IE7以下では、float解釈のバグがあり、clear:leftしていない（3）の状態がこれと同じように見えます。
フロート：左
サンプルテキストひらがなサンプル漢字サンプルサンプルテキストひらがなサンプル
（7）正しい解釈で、かつ背景が見えるようにする2：（5）と同じく、paddingが0で内包するのはフロートした子ボックスのみです。親要素に overflow:autoとwidth:100%を追加しています。
フロート：左
