Свободное размещение

Именно ради этой возможности и создано свойство float. В CSS можно свободно расположить любой мыслимый элемент (абзац, список, элемент div и т. д.), а не только изображение. Свободное размещение – это не схема выбора положения, а уникальная функция с интересными проявлениями.

Свободное размещение полезно не только, чтобы иногда «прижимать» к краю рисунки. На деле это один из основных инструментов современного Web-дизайна, основанного на технологии CSS. Свободным размещением элементов пользуются для построения документов с несколькими колонками; панелей навигации из ненумерованных списков; выравнивания, напоминающего таблицу, но не являющуюся таковой, и т.д.

Для размещения элемента у левой или правой границы и обеспечения обтекания текста вокруг него используется свойство float.

Значения: left right none inherit. Начальное значение: none

Применимо: Ко всем элементам.

В этом простом примере свойство float используется, чтобы прижать изображение вправо

img {float: right; margin: 20px; }

Замечание. Свойство float элемента img фактически подменяет признанный устаревшим align. Атрибут margin в этом примере играет роль также устаревших hspace и vspace.

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

Результат вывода вскрывает основные аспекты свободного размещения элементов:

• Любые свободно размещенные элементы близки по поведению к блокам. Такого эффекта можно добиться, указав display: block (хотя сама такая запись необязательна).

• При размещении текстовых элементов нужно задавать шири­ну (width). Без этого прямоугольник вывода содержимого может сжаться до ми­нимально возможного.

• Свободно размещаемый элемент располагается внутри зоны вывода содержимого охватывающего блока (ближайшего к элементу блочного элемента-родителя) и ни­когда не выходит в зону, отведенную заполнению.

• Элемент свободно размещается целиком, а соседнее содержимое «обтекает» его.

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

Выполните следующий пример для свободно разме­щенной картинки, которая по высоте превышает родительский элемент-абзац и переходит на следующий. Второму абзацу («boxed») назначены фон и граница, что позволяет уви­деть размеры прямоугольника элемента и сравнить с его же областью содержимого.

img { float: left; }

p.boxed { background-color: #999; border: solid 2px #333; }

Свободно размещенные элементы, находящиеся поблизости в документе-источнике, не могут друг друга перекрывать. Взамен же правилами предписано:

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

• Если для размещения элементов бок о бок недостаточно места, второй из элементов отодвигается вниз, пока освободившегося пространства не хватит для его вывода без перекрытия первого.

•

Текст Т екст Тек ст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст

Екст Т екст Тек ст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст

 

•

Также свободно размещаемым элементам запрещено выходить за рамки тех элементов, которые их содержат, если они вмещаются в эти элементы по ширине.