float：親ボックスの背景色が表示されない件について

floatA_base

次に、上の画像のような配置で、float させたAボックスとBボックスを containerボックスで包括し、footerボックスには clear: both; を、containerボックスにはグレーの背景色を指定します。 この containerボックスの背景色、あるいは背景画像が表示されない件とその解決方法について後述していきます。 （※ CSSソースやHTMLソースは最低限必要なものだけ記載しています。）

CSS source

#header { width: 100%; }
#container { width: 100%; }
#boxA { float: left; width: 35%; }
#boxB { float: right; width: 65%; }
#footer { clear: both; width: 100%; }

HTML source

<div id="header">header</div>
<div id="container">
 <div id="boxA">A</div>
 <div id="boxB">B</div>
</div>
<div id="footer">footer</div>

floatプロパティを使ってボックスを配置した場合、同じ階層に clear できるボックスがあれば問題ないのです。（階層 = この例ではcontainerボックスの中） 作れない場合は、それを包括するボックスの高さは自動で算出されません。

AボックスとBボックスは float で浮いている状態ですので、containerボックスは中身が無いものと判断します。 その結果、containerボックスの高さは 0 となり、次の画像のようにAボックスとBボックスを囲んでくれなくなります。 それにより、包括したボックスの背景色が上手く表示されなくなるという訳です。

floatA_4 image

グレーの背景色がAボックスとBボックスの下まで広がってないですね。 これでは、containerボックスに背景色や背景画像を指定していた場合は表示されなくなりますね。（画像をクリックするとサンプルページが見れます。）

<解決策 1> containerボックスに高さ height を指定

floatA_5 image

CSS source

#header { width: 100%; }
#container { width: 100%; height: 100px; }
#boxA { float: left; width: 35%; }
#boxB { float: right; width: 65%; }
#footer { clear: both; width: 100%; }

HTML source

<div id="header">header</div>
<div id="container">
 <div id="boxA">A</div>
 <div id="boxB">B</div>
</div>
<div id="footer">footer</div>

containerボックス自体の高さ height を指定すると解決しますが、AボックスとBボックスの内容がその高さを超えてしまった場合、やはりレイアウトが崩れてしまいます。（画像をクリックするとサンプルページが見れます。）

<解決策 2> containerボックスに overflow: hidden; を指定

floatA_6 image

CSS source

#header { width: 100%; }
#container {
  width: 100%;
  overflow: hidden;
}
#boxA { float: left; width: 35%; }
#boxB { float: right; width: 65%; }
#footer { clear: both; width: 100%; }

HTML source

<div id="header">header</div>
<div id="container">
 <div id="boxA">A</div>
 <div id="boxB">B</div>
</div>
<div id="footer">footer</div>

containerボックスに overflow: hidden; を指定しても解決します。 [ CSSの仕様書 / 和訳 ] に、 overflow: visible;（overflowの初期値） 以外であれば、height が auto の場合は子要素の高さに依存すると書かれていますので overflow: hidden; を指定すると高さは戻ります。（上の画像をクリックするとサンプルページが見れます。）

overflow の値には、scroll や auto もありますが、scroll はスクロールバーが出ますし、auto についてもスクロールバーが出る場合があるかも？ちょっと怪しいです。hidden は一部未対応の古いブラウザもあるようです。

<解決策 3> containerボックスに float:left; を指定

floatA_7 image

CSS source

#header { width: 100%; }
#container { float:left; width: 100%; }
#boxA { float: left; width: 35%; }
#boxB { float: left; width: 65%; }
#footer { clear: left; width: 100%; }

HTML source

<div id="header">header</div>
<div id="container">
 <div id="boxA">A</div>
 <div id="boxB">B</div>
</div>
<div id="footer">footer</div>

containerボックスに float: left; を指定しても解決します。幅は表示領域いっぱい width: 100%; に指定します。Bボックスも float: left; にし、 footerボックスで clear: left; にしています。（上の画像をクリックするとサンプルページが見れます。）

<解決策 4> containerボックスに clearfix の手法

floatA_8 image

CSS source

#header { width: 100%; }
#container { width: 100%; }
#container::after {
    display: block;
    content: " ";
    clear: both; }
 #boxA { float: left; width: 35%; }
 #boxB { float: right; width: 65%; }
#footer { width: 100%; }

HTML source

<div id="header">header</div>
<div id="container">
 <div id="boxA">A</div>
 <div id="boxB">B</div>
</div>
<div id="footer">footer</div>

containerボックスに clearfix の手法を用いても解決します。::after 擬似要素に display: block; を指定し、containerボックス の下に見えないボックスを作り出しています。そのボックスで float を解除しています。未対応ブラウザ用のソースはもう少し長いです。→ [ clearfix ]（上の画像をクリックするとサンプルページが見れます。）

※ CSS3より、擬似クラスと区別するため擬似要素の :（コロン） は :: になりました。[ pseudo-elements CSS3 ]

<その他> float と margin-left を使ってボックスを配置した場合

floatA_9 image

CSS source

#header { width: 100%; }
#container { width: 100%; }
#boxA { float: left; width: 300px; }
#boxB { margin-left: 300px; }
#footer { clear: left; width: 100%; }

HTML source

<div id="header">header</div>
<div id="container">
 <div id="boxA">A</div>
 <div id="boxB">B</div>
</div>
<div id="footer">footer</div>

float と margin-left を使った段組では、margin-left を指定したボックスの方を長くなるようにすれば、レイアウトは崩れません。floatは浮いてますから親要素の高さを算出しませんが、 margin-left の方は浮いているわけではないので親要素の高さを算出します。

三角矢印floatの性質から読まれると分かりやすいです。

上に戻る