コーディングの基本知識【floatを使う際にoverflow:hidden;を入れる】

i.M.D. Staff

2014.10.17

お久しぶりです。
今さらなのですが今日はコーディングの基礎知識を書きたいと思います。
タイトルで出てきた「float」とは指定された要素を左または右に寄せて配置する際に使用します。
「float」を使用した際に「margin-bottom」がちゃんと効かない、親要素に入れた背景がちゃんと下まで出ていない等の経験はありませんか。
なぜそのようなことがおこるかというと、原因は親要素に「overflow:hidden」を入れることを忘れているからです。「float」を使うとボックスが浮いてしまい親要素の高さがなくなってしまいます。
親要素に「overflow:hidden」をいれると子要素のfloat部分を包含するために自動拡張してくれます。
「overflow:hidden」を親要素に入れることによって「margin-bottom」がちゃんと効かない、親要素に入れた背景がちゃんと下まで出ていない等の問題を解決することが出来ます。

下記は親要素(グレーの部分)に「overflow:hidden」がはいっています。

overflow:hidden

float:left;

下記は親要素(グレーの部分)に「overflow:hidden」がはいっていません。
その為上記で出ていた背景が出ていません。

float:left;

「float」を使う際は「overflow:hidden」を親要素に入れるのを忘れない為にも「float」と「overflow:hidden」はセットで覚えてもいいかもしれません。

次回はclearfixについて書きたいと思います。