divなど、要素をfloatさせると親要素の高さが0になってしまうが、これだと都合の悪いことが多々ある。
親要素にも高さをもたせ、次に続く要素達の位置を正しく配置するためには、
floatさせた要素の最後、ようは親コンテナの擬似要素である「:after」に「clear: both;」を適用してやればOK。

具体的には下記の通り。

<div class="container">

.container:after {
    content: " ";
    display: block;
    visibility: hidden;
    height: 0;
    clear: both;
}

contentで空要素を作成し、ブロック要素を指定、高さを0に設定し、visibilityで念のためコンテンツを非表示に設定。これにclear:bothをかけてやることで
親要素の高さも子要素に応じて変動してくれるようになる。