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