Запрет на обтекание

Мы достаточно поговорили о поведении при перемещении. Прежде чем перейти к позиционированию, обсудим еще один вопрос. Не всегда хочется, чтобы содержимое обтекало перемещаемый элемент, в некоторых случаях этого надо избежать. Если документ разбит на разделы, то перемещаемые элементы одного раздела не должны будут «свисать» в следующий. В этом случае имеет смысл запретить размещение первого элемента каждой секции следом за перемещаемым элементом. Если бы первый элемент все равно оказался рядом с перемещаемым элементом, он был бы смещен вниз, под перемещаемый элемент, и все последующее содержимое последовало бы за ним.

Это делается с помощью свойства clear. Например, объявив h3 {clear: left;}, можно гарантировать, что ни один элемент h3 не будет размещен справа от перемещаемого влево элемента. Объявление можно перевести так: «убедитесь, что левая сторона h3 свободна от перемещаемых изображений», и результат его применения очень похож на эффект от HTML конструкции. (По иронии судьбы в большинстве броузеров элементы br по умолчанию формируют строковые блоки, поэтому свойство clear может быть применено к ним только после изменения display!) Следующее правило применяет свойство clear, чтобы предотвратить обтекание перемещаемых влево элементов элементами h3:

h3 {clear: left;}

Это правило гарантирует, что все элементы h3 будут смещены ниже всех перемещаемых влево элементов, но появление перемещаемых элементов справа от элементов h3 разрешено.


Чтобы избежать подобных явлений и гарантировать отсутствие любых перемещаемых элементов в одной строке с элементами h3, задайте значение both:

h3 {clear: both;}

Все понятно: это значение предотвращает существование перемещаемых элементов с обеих сторон необтекаемого элемента. Если же надо было бы беспокоиться только о расположении элементов h3 относительно перемещаемых вправо элементов, то объявление было бы таким: h3 {clear: right;}. Наконец, существует значение clear: none, которое допускает обтекание элементов с любой стороны. Как и float: none, это значение главным образом существует для того, чтобы обеспечить обычное поведение документа, в котором перемещаемые элементы могут располагаться с обеих сторон элементов. Конечно, значение none может применяться для переопределения других стилей.

Нес мотря на общее для всего документа правило, по которому элементы h3 не допускают размещение перемещаемых элементов с любой из сторон, для одного из h3 было разрешено размещение перемещаемых элементов со всех сторон:

h3 {clear: both;}

What's With All The Latin?



В CSS1 и CSS2 работа свойства clear обеспечивалась увеличением верхнего поля элемента таким образом, что оно заканчивается ниже перемещаемого элемента.


В итоге любое поле, заданное для верха необтекаемого элемента, игнорировалось. То есть вместо ширины в 1.5em, например, поле увеличилось бы до 10em, или 25px, или 7.133in, или любого другого значения, достаточного для перемещения элемента вниз на такое расстояние, чтобы область содержимого располагалась ниже нижнего края перемещаемого элемента.

В CSS2.1 было введено понятие превышения (clearance). Превышение – это дополнительное пространство, добавляемое сверху к верхнему полю элемента, чтобы сместить его ниже всех перемещаемых элементов. Это значит, что верхнее поле элемента не меняется, когда элемент объявляется необтекаемым. Его перемещение вниз обусловлено превышением. Внимательно рассмотрите размещение рамки заголовка – результат следующей разметки:

img.sider {float: left; margin: 0;}
h3 {border: 1px solid gray; clear: left; margin-top: 15px;}

Why Doubt Salmon?



Между верхней рамкой h3 и нижней рамкой перемещаемого изображения нет пробела, потому что для смещения верхнего края рамки h3 под нижний край перемещаемого элемента над 15-пиксельным верхним полем было добавлено 25 пикселов превышения.


Это произойдет, если только верхнее поле h3 будет менее 40 пикселов, в противном случае h3 естественным образом будет размещаться под перемещаемым объектом, и значение clear будет лишним. В большинстве случаев, конечно, неизвестно, насколько далеко надо переместить элемент. Чтобы гарантировать, что между верхом необтекаемого элемента и низом перемещаемого элемента будет иметься просвет, необходимо задать нижнее поле самому перемещаемому элементу. Поэтому, если бы потребовалось, чтобы в предыдущем примере под перемещаемым элементом был хотя бы 15-пиксельный просвет, надо было бы изменить CSS вот так:

img.sider {float: left; margin: 0 0 15px;}
h3 {border: 1px solid gray; clear: left;}

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

Оцените статью: (0 голосов)
0 5 0

Статьи из раздела CSS на эту тему:
Блок-контейнер
Блоки-контейнеры и абсолютно позиционированные элементы
Видимость элементов
Задание ширины и высоты
Запрет перемещения