WinIE : 右 float 解除時の背景漏れ出し

右 float の解除を、後続のブロック要素で clear すると、親要素の背景色（背景画像）が画面左端まで漏れ出す場合がある。具体的には、 float の回り込み空間を後続の文字 etc が消費しきらない時。

WinIE5, WinIE5.5, WinIE6 で発病確認。 WinIE4 は逆に float の右側へ色のはみ出しがある。 WinIE6 は「 WinIE6 float の怪」も同時に発生して、 float してる要素前後の文字が消えてしまいがち。

対処法は、「 WinIE6 float の怪」と同じく、背景色（背景画像）の漏れ出した親要素の width を明示すること。アホクサ。


body    { padding-left : 10% }
div     { background-color : #bfffff }
img     { float : right }
p.clear { clear : right }

テスト 1

水色背景部分は div 要素。この段落の次に出現する画像は float:right されてます。

[ float:right の画像]

この段落で float 解除。

テスト 2

この div は、本来する必要も無い width: 100% をわざわざ指定してます。ほかはテスト 1 と同じ。

[ float:right の画像]

この段落で float 解除。

補足

WinIE (〜5.5, 6 の Quirks モード）は、 width の算出法がオカシイ（既知の「 border, padding 分まで含めてしまう」どころか margin 分までも含めてる気配がある）ので、 width 値明示の際は仕様どおりの計算を前提にしないと、 Mozilla や MacIE5 や Opera 等のマトモブラウザで横スクロールバーが出たりしますよ。