子にフロートボックスを含む時の親ボックスの背景

兄上からの下請けでHTMLとCSSを作っていた時に、CSSのフロートの挙動で気付いたことがあったのでメモ。

現象を言葉で述べると、「親ボックスの子にフロートするボックスとフロートしないボックスを含む場合、Mozillaでは親ボックスの背景色及び背景画像がフロートしない子ボックスの下端までしか表示されない」ということになるのですが、これでは伝わらなさそうなので実例を以下に。style属性使用。

no float
float left float left float left float left float left float left float left float left float left float left float left float left float left float left float left float left float left float left float left float left float left float left float left float left float left float left
float right float right float right float right
float right float right float right
out of #parent box.
clear float.

IEやOperaで見ると、親ボックスの背景色(灰色)は、子の左フロートボックス(背景薄赤)の下端まで表示されるのですが、Firefoxで見ると親ボックスの背景色が、最初の子であるフロートしないボックスの下端までしか及ばないようなのです。しかも子のフロートの効果が、親ボックスの外にあるボックスにも影響しているという("out of #parent box."が、左フロートを回り込んで右フロートの直下から表示される)。

気になるのは、IE・Operaの表示とFirefoxの表示のどちらがCSSの仕様として正しい表示なのかというところなのですが、このへんは自分で仕様を読んでみてもさっぱり分からないので、考えるのは一時保留しときます。

当初の意図としては、IE・Operaのような表示を期待していたので、Firefoxでそうならないのが悩みどころだったのですが、取り敢えず回避策を見つけることができました。

#parent:after {
    display:block;
    margin-top:-1px;
    height:1px;
    content:"";
    clear:both;
}

という風に、親ボックス(#parent)の末尾にフロートをclearする擬似要素を挿入することで、IE・Operaと同様の表示にすることができました。Operaでこのスタイルが適用されても、表示上は特に変わらないようになっているかと思います(IEでは:after擬似要素をサポートしないので、単に無視されます)。しかしこちらでまだ気付いていない落とし穴があるかもしれないので注意。

追記(2005年6月15日)

更に試してみて発見したことがあったので追記。以下の例ではFirefox、IE、Operaで同様の表示をします。

no float
float left float left float left float left float left float left float left float left float left float left float left float left float left float left float left float left float left float left float left float left float left float left float left float left float left float left
float right float right float right float right
float right float right float right
out of #parent box.
clear float.

前の例と何が違うかというと、親ボックスのスタイルで幅を明示的に指定していないところです。つまりこの場合に、親ボックスにwidthの値(auto以外)を指定すれば、IE・Operaでは前の例と同様、親ボックスの背景色が左フロートの下端まで及ぶことになります。

というか、こちらの例を基準に考えると、前の例についてもFirefoxの方が正しい表示をしているような気がしてきました(しかしその仕様における根拠は未だ分からないままではあるのですが……)。

追記(2007年8月23日)

本記事で挙げたような表示となるCSS仕様上の根拠を、カラクリエイト：floatしたボックスを含む親ボックスの高さの算出にて見つけて頂きました。以下に仕様の該当箇所を挙げておきます。

また、フロートボックスを親ボックスからはみ出さないようにするための技術は、今日clearfixとして知られています。