about this site

The clear property is important for controlling the behavior of floats. Compare these two examples:

<div class="box">...</div>
<section>...</section>
.box {
  float: left;
  width: 200px;
  height: 100px;
  margin: 1em;
}

<div class="box">

I feel like I'm floating!

</div>
<section>

In this case, the section element is actually after the div. However, since the div is floated to the left, this is what happens: the text in the section is floated around the div and the section surrounds the whole thing. What if we wanted the section to actually appear after the floated element?

</section>

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

<div class="box">

I feel like I'm floating!

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

Using clear we have now moved this section down below the floated div. You use the value left to clear elements floated to the left. You can also clear right and both.

</section>