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

`float`の解除

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

index.html

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

style.css

.float {
  float: left;
}

.clear {
    clear: left;
}