CSSでfloat指定したボックスを含むボックスの高さが0になる

HTMLとCSSを扱っている時に、分かりにくかったCSSの仕様を紹介します。 divタグなどで色々ボックスモデルを作って、そのレイアウトの実現手段としてfloat属性を指定することがあると思います。しかし、divタグで括った中身にfloat属性が指定されている場合、「float指定したボックスを含むボックスの高さが0になる」現象が起きます。

例えば、以下に「floatを指定しない場合」と、続けて「floatを指定した場合」を示します。divタグで作った大きい四角の中にdivタグで作った小さい四角があるような構成です。



<div style="background-color:#c6002f;width:400px;"> <div style="width:300px;height:200px;background-color:#efef6f;margin:auto;"></div> <div style="width:300px;height:200px;background-color:#e6556f;margin:auto;"></div> </div> <br>




<div style="background-color:#c6002f;width:400px;"> <div style="width:300px;height:200px;background-color:#efef6f;margin:auto;float:left;"></div> <div style="width:300px;height:200px;background-color:#e6556f;margin:auto;float:left;"></div> </div>

このように、下の「floatを指定した場合」では、大きい四角の高さが無くなってしまっています。このような場合にはclearfixと呼ばれる方法で対処するのが普通らしいです。詳しくは検索するか、以下のようなサイトを参考にしてみるといいと思います。

参考サイト
http://www.fsiki.com/archive/css-doc/float.html