Параметры размещения. Плавающие контейнеры

Параметры размещения. Плавающие контейнеры

Местоположение блочных контейнеров (и любых других блочных элементов) на Web-странице определяют два весьма примечательных атрибута стиля.

Изначально блочные элементы Web-страницы располагаются на ней по вертикали, строго друг за другом, в том порядке, в котором они определены в HTML-коде. Именно так располагаются блочные контейнеры, абзацы и заголовки на всех созданных нами Web-страницах.

Однако мы можем установить для блочного элемента выравнивание по левому или краю родительского элемента (блочного контейнера, в который она вложена, или самой Web-страницы). При этом блочный элемент будет прижиматься к соответствующему краю родителя, а остальное содержимое будет обтекать его с противоположной стороны.

Атрибут стиля float как раз и задает, по какому краю родительского элемента будет выравниваться данный элемент Web-страницы:

float: left|right|none|inherit

Возможны три значения:

— left — элемент Web-страницы выравнивается по левому краю родительского элемента, а остальное содержимое обтекает его справа;

— right — элемент Web-страницы выравнивается по правому краю родительского элемента, а остальное содержимое обтекает его слева;

— none — обычное поведение элемента Web-страницы, когда он следует за своим предшественником и располагается ниже его.

Пример:

TABLE.left-aligned { float: left }

После применения данного стиля к таблице она будет выровнена по левому краю родительского элемента, а остальное содержимое будет обтекать ее справа.

А что если мы зададим одинаковое значение атрибута стиля float для нескольких следующих друг за другом блочных элементов? Они выстроятся по горизонтали друг за другом в том порядке, в котором они определены в HTML-коде, и будут выровнены по указанному краю родительского элемента. Настоящая находка!

Данный атрибут стиля обычно применяют для блочных контейнеров, формирующих дизайн Web-страниц. Такие контейнеры называют плавающими.

Возьмем атрибут стиля float на заметку. И пойдем дальше.

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

Для этого служит атрибут стиля clear:

clear: left|right|both|none|inherit

Как видим, доступных значений здесь четыре:

— left — элемент Web-страницы должен располагаться ниже всех элементов, для которых у атрибута стиля float задано значение left;

— right — элемент Web-страницы должен располагаться ниже всех элементов, для которых у атрибута стиля float задано значение right;

— both — элемент Web-страницы должен располагаться ниже всех элементов, для которых у атрибута стиля float задано значение left или right;

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

Пример:

#ccopyright { clear: both }

Здесь мы задали для именованного стиля ccopyright (он применяется к контейнеру, содержащему сведения об авторских правах) расположение ниже всех контейнеров, выровненных по левому или правому краю родительского элемента.