てんぽ: IEとwidthとブロック整形コンテキスト

普段CSSを書くときにはブロック整形コンテキスト（block formatting context）のことなんて考えていませんが、実際にそれが問題になるケースがあったのでメモ。

• 右上フロート広告枠の雛形

一つ目の問題は Firefox で広告ボックスの下にスペースが空いてしまうこと

これはたぶん、Clearing floatsのせいでしょうね。 Clearing floatsはフロートのコンテナにoverflow:hiddenやautoを指定することでコンテナの高さを確保するテクニックですが、 overflowのせいで新たなブロック整形コンテキストが生じています。 これが先行する右フロートと重なりそうな場合には、CSS2.1 9.5の規則によって、ボックスの幅が縮められる（またはclearされる）ことになります。 （floatやoverflowとブロック整形コンテキストの関係については『セオリー・オブ・スタイルシート』の「3.5 コンテンツの溢れと切り抜き」に詳しく書かれています。）

二つ目の問題はIEで画像が入ると「Clearing floats」がIEで効かない？

これはIE6の幅か高さを指定しないボックスにはoverflowが効かないバグのせいだと思います。 では幅か高さを指定すればいいかというと、今度はフロートに後続するボックスの幅がフロートに合わせて短縮されるバグに引っかかります（上のFirefoxのような表示になる）。

そういうわけで、Clearing floatsは使わずにどこかでclearするのがいいと思います（たとえば末尾の「URL -キャッシュ- はてなブックマーク」の部分で）。

それにしてもIEの挙動は不思議です。

• 幅や高さを指定した要素ではボックスサイズの算出時にフロートを除外しない(IE6)
• （幅や高さを指定した）フロートに後続するボックスの幅がフロートに合わせて短縮される(5.x/6.0)
• 幅や高さを指定しないとoverflowが効かない
• widthを指定すると入れ子関係のマージンの相殺がなくなる（ADP: マージンの相殺と背景）

まるで幅か高さを指定すると新たなブロック整形コンテキストを生じるかのよう。