親要素の高さは子要素を包む高さとなりますが、
子要素が全てfloatの時、親要素の高さは0となってしまいます。
これは、floatが「浮いている」という意味で、親要素から見るとfloatの子要素は存在しないように見えるためです。

floatの解除

子要素が全てfloatでも、親要素が高さを持つように設定してみます。
floatはclear: left;で「浮いている」状態を解除できます。
clear: left;を適用するためだけの空のタグを用意します。
空タグとclearでfloatを解除するのはよく使うテクニックらしいです。

<div><divclass="float">
    ...
  </div><divclass="float">
    ...
  </div><divclass="clear"></div><!-- `clear: left;`を設定するための空タグ --></div>

.float{float:left;}.clear{clear:left;}