floatの親要素の高さ

通常、親要素の高さは子要素を包む高さとなります。

しかし、子要素が全てfloatの時、親要素の高さは0となってしまうという性質があります。

これは、floatは「浮いている」という意味で、親要素から見るとfloatの子要素は存在しないように見えるからです。

floatの解除

子要素が全てfloatでも、親要素が高さを持つように設定してみましょう。

floatはclear: left;で「浮いている」状態を解除できます。

ここではclear: left;を適用するためだけの空のタグを用意しましょう。

空タグとclearでfloatを解除するのはよく使うテクニックなので、覚えておくようにしましょう。