親要素の高さは子要素を包む高さとなりますが、
子要素が全てfloatの時、親要素の高さは0となってしまいます。
これは、floatが「浮いている」という意味で、親要素から見るとfloatの子要素は存在しないように見えるためです。
floatの解除
子要素が全てfloatでも、親要素が高さを持つように設定してみます。floatはclear: left;で「浮いている」状態を解除できます。clear: left;を適用するためだけの空のタグを用意します。
空タグとclearでfloatを解除するのはよく使うテクニックらしいです。
index.html
<div><divclass="float">
...
</div><divclass="float">
...
</div><divclass="clear"></div><!-- `clear: left;`を設定するための空タグ --></div>style.css
.float{float:left;}.clear{clear:left;}