【CSS】float:leftを設定すると親要素のheightが0になる

Author:

ふとhtmlを書いていて、あれと思ったこと。
divタグがあって、その下にfloatでサイドバーとコンテンツを定義。

ちゃんと表示されるのを確認したものの、親要素のheightが0pxになっているのに気がついた。
あれー?

調べてみたところ、どうやらfloatされたボックスは高さを扱わないのが正常らしく、
この動作は仕様らしい。
親要素に立てるビルって感じではなく、飛行船みたいに浮いちゃうのですね。

ということで、親要素にbackground-colorとかを設定する場合ちょっと問題が生じてしまう。
ネットで調べた結果、主に2パターンの対処があるようだ。

1.clearfixを使う

clearfixクラスを設定して、afterを下記のように設定する。
.clearfix:after {
content: ” “;
display: block;
clear: both;
height: 0;
visibility: hidden;
}

要は各種floatのお尻に空っぽのboxを用意して、そこにclear: bothを適用させる。
after属性って扱わないブラウザもあったような。
調べてみたところIE7以前はだめ、IE8以降ならOKか。

2.overflow属性を使う

overflow: autoを使うとサイズを自動計算してくれます。
floatされたボックスであっても例外なく。
そのため、heightも自動調整してくれます。

確かにこれはこれでいいのか。
若干気持ち悪さが見え隠れするけど。

もちろん親要素にheight属性を設定すればその問題は解決できるけど、
ちょっとこれは強引すぎるか。
clearfixかもう一つボックスを追加、が気持ち良い解決策のような気がする。

Share on Facebook
Pocket