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