Как объяснить свойство CSS clear?

Question

Я пытался понять свойство CSS clear. Я вижу, что он добавляет новую строку и предотвращает перекрытие других элементов. Я заключил это с моими личными наблюдениями и некоторыми чтениями.

Это было то, что я возился с:

.div1 {
  float: left;
  width: 100px;
  height: 50px;
  margin: 10px;
  border: 3px solid #73AD21;
}
.div2 {
  border: 1px solid red;
  clear: left;
}

<h2>Using clear</h2>
<div class="div1">div1</div>
<div class="div2">div2 - remove
  <mark>clear:left</mark> and see the impact</div>

Как вы можете объяснить это непрограммистам? Скажи свою жену?

Answer 1

Допустим, у нас есть два ряда, где в каждом ряду по 3 стула.

Теперь представьте, что вы сидите на стуле в середине первого ряда.

Если вы говорите clear:leftэто означает, что вы не позволяете никому сидеть слева от вас, если вы говорите, clear:rightВы не позволяете никому сидеть справа от вас.

И если вы скажете clear:both Вы не позволяете никому сидеть по обе стороны и выбирать следующий ряд стульев!