об этом сайте

Свойство clear используется для контроля поплавков. Сравните эти два примера:

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

<div class="box">

Я чувствую, что я плыву!

</div>
<section>

В этом случае элемент section находится после элемента div.Но поскольку div "всплывает слева", то случится следующее: текст непосредственно из section будет "омывать" div и сместится вправо, а section окружит все вокруг. Что делать, если мы хотим, что бы раздел section оказался внизу, под всплавающим элементом?

</section>

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

<div class="box">

Я чувствую, что я плыву!

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

Использовав clear мы сейчас сдвинули эту секцию вниз под всплывающий div. Вы можете использовать значение left для очистки всплывающих элементов слева. Также вы можете использовать значения right и both.

</section>