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

Именно ради этой возможности и создано свойство 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; }

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

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

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

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

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

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