CSS:float property

floatは、画像をテキストで囲むために作成されます.
clearはfloatの動作方式を制御する上で重要な役割を果たしている.
-html-

<div class="box">...</div>
<section>...</section>

-css-

.box {
  float: left;
  width: 200px;
  height: 100px;
  margin: 1em;
}

この場合htmlのdiv下部のsectionは次の順序である.
divにはfloat:leftがあるのでsectionの上の左側に浮かび、重なる形で現れます.
HTMLシーケンスのようにオーバーラップするのではなくdivタグを上に表示するには、sectionタグを下に表示するには、sectionにclearプロパティを付与する必要があります.
-html-

<div class="box">...</div>
<section class="after-box">...</section>

-css-

.box {
  float: left;
  width: 200px;
  height: 100px;
  margin: 1em;
}
.after-box {
  clear: left;
}

これによりsectionにclear:leftプロパティが付与され、divラベルとsectionラベルが明らかに上下に分かれて表示されます.