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

Question

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

Это было что-то я вертел:

.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>

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

Answer 1

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

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

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

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