要素をfloatさせると、高さに含まれなくなり上記のように親要素からはみ出てしまいます。
これを解決するには
・親要素に「overflow:hidden;」を指定する
・親要素にfloat解除のためのスタイルをまとめたclass（いわゆるclearfix）を当てる
の2つが一般的だと思います。
2つ目のclearfixはどこまでを対象ブラウザに含めるかによって内容が変わるのですが、
当社でテストしているブラウザに対応しているものは下記のようになります。
.clearfix:after {
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}
* html .clearfix { zoom: 1; } /* IE6 */
*:first-child+html .clearfix { zoom: 1; } /* IE7 */
上記で
・最新Google Chrome
・最新Firefox
・最新Safari
・IE6～11
に対応できます。
IE6、7の記述は必要に応じて。
コメントする