floatについて

floatは浮かせて、左や、右によせる。
よって、浮いているので、特に指定のない限り、要素が上に詰めて配置されてしまう。
そこで浮かせた後の要素に以下の要素を追加する必要がある。

html

<div id="under"></div>

css

#under{
/* float: leftされた要素を解除 */
clear: left;
}

これだと、 floatを使うたびに要素を追加し、cssにも追加が必要。
よって一般的には以下のコードを使う。(親要素にclass="clearfix"を追加しとく）

css

clearfix:after {
content: "";
display: block;
clear: both;
}