Сетки, 14. Почему?

Сетки, задание 14. Выполняем задание по порядку. Блок1, Блок2 и Блок3 стоят в одну строку друг за другом. Почему если я ставлю для Блока2 clear: right; то стоящий справа от него Блок3 не уходит вниз, а остается в одной строке с Блоками 1, 2 и 3?

Ведь по логике вещей я с помощью clear: right; запрещаю отбекать этот блок справа

Здесь тоже ничего не произойдет, потому что вы кодом не делитесь…

<span style=` `"background:#FFC0C0;height:30px; width:250px;float:left;margin:5px;"` `>Float блок</span>
<div style=` `"background:#C0FFC0;clear:left;"` `>Блочный</div>`
<div style=` `"background:#C0C0FF;"` `>Блочный</div>

Нифига не научное объяснение, но на пальцах:

вот представьте, у вас есть 3 элемента, все они флоаты (плавающие) влево.
что важно - они все выпадают из обычной системы координат.

когда мы ставим запрет обтекания слева элементу №2, это значит что он сам не может прикрепиться левой стороной к левому верхнему углу (а там уже сидит флоат №1, значит он не может прикрепиться левой стороной к его правому бочку поскольку вакантная площадь для помещения для него будет равна вакантной площади блока№1 минус площадь блока№1).
поэтому элемент №2 переходит на следующую строку для флоатов, ввиду включенного запрета обтекания слева (а сам флоат левый если что). т.е. он все также стремится налево, но т.к. там сидит флоат№1 и мешает его обтекать в той же манере, что и стремится обтечь флоат№2, то он помещается в левый нижний угол флоат№1.

а блоку3 ничто не мешает прикрепиться левым бочком к предыдущему (для него) блоку2.

также работает и для правых флоатов с правым запретом (отобразите ситуацию зеркально).

Рассмотрим что происходит при разнонаправленных флоат и запретах.
опять 3 элемента с левым флоат и правый запрет элементу№2.

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

1 лайк