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

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

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

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

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


html css concept css-float
person Zameer Ansari    schedule 31.12.2015    source источник
comment
Он указывает, может ли элемент быть рядом с плавающими элементами, которые предшествуют ему, или должен быть перемещен вниз (очищен) под ними. Посмотрите простое, но подробное объяснение на MDN.   -  person Dani Vijay    schedule 31.12.2015
comment
@DaniMVijay Я все еще читаю :) Спасибо.   -  person Zameer Ansari    schedule 31.12.2015

Ответы (1)


arrow_upward
1
arrow_downward

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

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

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

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

person Nag    schedule 31.12.2015
comment
Это было хорошо для программистов, а не для непрограммистов. Я думаю, теперь мы можем объяснить это нашим женам ;) - person Zameer Ansari; 31.12.2015