Свойство float …

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

По-настоящему именно ради этой возможности и создано свойство float. Важнейшее различие между выравниванием в HTML и CSS состоит в том, что в CSS можно свободно расположить любой мыслимый элемент (абзац, список, элемент div и т. д.), а не только изображение.

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

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

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

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

Свойство:: float
Значения:: left | right | none | inherit
Начальное значение:: none
Применимо:: Ко всем элементам
Наследуется:: Нет

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

Код:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="content-type" content="text/html; charset=windows-1251">

<title>Прижатие изображения к правому краю</title>

<style>

</style>

</head>
<body>

<p><img src="back.gif" alt="" />И с грустною радостью она теперь останавливалась на этих образах, отгоняя от себя с ужасом только одно последнее представление его смерти, которое — она чувствовала — она была не в силах созерцать даже в своем воображении в этот тихий и таинственный час ночи.</p>

</body>
</html>

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

(рис. 1). Прижатие изображения к правому краю.

Преимуществом margin является возможность задавать разные отступы вдоль каждой стороны иллюстрации (отступ, определявшийся hspace слева, был равен отступу справа, а отступ, заданный vspace сверху, был равен отступу снизу).

Для расширения пространства вокруг свободно размещенного элемента дополнительно можно использовать заполнение. И хотя поведение страницы в этом примере не может быть не знакомо тем, кто работал с HTML, оно достаточно интересно и с точки зрения модели зрительного расположения элементов, которая действует в CSS.

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

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

Основы свободного размещения …

Свойство float работает не только с изображением, но и с любым элементом. В примере на (рис. 2) свойство float применено в отношении текстового фрагмента (известного в CSS как «встроенный незамещаемый элемент»).

Код:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="content-type" content="text/html; charset=windows-1251">

<title>Свободно размещенный встроенный текстовый элемент</title>

<style>

</style>

</head>
<body>

<p><span class="note">Она теперь уже могла вспоминать, могла плакать и могла молиться.</span>И с грустною радостью она теперь останавливалась на этих образах, отгоняя от себя с ужасом только одно последнее представление его смерти, которое — она чувствовала — она была не в силах созерцать даже в своем воображении в этот тихий и таинственный час ночи.</p>

</body>
</html>

(рис. 2). Свободно размещенный встроенный текстовый элемент.

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

Любые свободно размещенные элементы (включая, как показывает пример, встроенные) близки по поведению к блокам. Такого эффекта можно добиться, указав display: block (хотя сама такая запись необязательна).
При размещении незамещаемых (т. е. текстовых) элементов нужно задавать ширину (width). Без этого прямоугольник вывода содержимого может сжаться до минимально возможного.
Свободно размещаемый элемент располагается внутри зоны вывода содержимого охватывающего блока (ближайшего к элементу блочного элемента-родителя) и никогда не выходит в зону, отведенную заполнению.
Вдоль каждой стороны элемента сохраняются необходимые отступы. Иными словами, элемент свободно размещается целиком (от одного внешнего края и до другого), а соседнее содержимое «обтекает» его.
В отличие от обычных отступы вокруг свободно размещаемых элементов никогда не сжимаются (даже по вертикальной оси).

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

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

Код:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="content-type" content="text/html; charset=windows-1251">

<title>Поведение накрытого изображением элемента</title>

<style>

</style>

</head>
<body>

<p><img src="back_up.gif" alt="" />Она теперь уже могла вспоминать, могла плакать и могла молиться.</p>
<p class="box">И с грустною радостью она теперь останавливалась на этих образах, отгоняя от себя с ужасом только одно последнее представление его смерти, которое — она чувствовала — она была не в силах созерцать даже в своем воображении в этот тихий и таинственный час ночи.</p>

</body>
</html>

(рис. 3). Поведение накрытого изображением элемента.

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

Заметим также, что иллюстрация перекрыла (была выведена «поверх») фон и границу следующего абзаца. Такое поведение элементов, имеющих свободное размещение, предписывает стандарт.

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

Спецификация CSS 2.1 содержит восемь конкретных правил позиционирования свободно размещенных объектов. Если же вам нужны подробности этих правил, обратитесь напрямую к первоисточнику по адресу: www.w3.org/TR/CSS21/visuren.html#float-position.

Полезное и практичное изложение этих правил с примерами приводит и в книге «Cascading Style Sheets: The Definitive Guide» (издательства «O'Reilly») ее автор Эрик Мейер.

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

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

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

Взамен же правилами предписано:

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

Другие правила ограничивают высоту размещения верхней границы свободно располагаемого объекта:

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

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

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

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

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

Отрицательные значения отступа и перекрытие элементов …

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

Но при задании отрицательных отступов свободно размещаемого объекта, показанного в следующем примере и на (рис. 4), кажется, что оба правила нарушаются.

Код:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="content-type" content="text/html; charset=windows-1251">

<title>Свободно размещаемый элемент с отрицательным отступом</title>

<style>

</style>

</head>
<body>

<p><img src="back_up.gif" alt="" />И с грустною радостью она теперь останавливалась на этих образах, отгоняя от себя с ужасом только одно последнее представление его смерти, которое — она чувствовала — она была не в силах созерцать даже в своем воображении в этот тихий и таинственный час ночи.</p>

</body>
</html>

(рис. 4). Свободно размещаемый элемент с отрицательным отступом.

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

Ни одно правило при отрицательном верхнем отступе не мешает наложению элемента на содержимое, которое уже показано на экране, поэтому от вертикальных отрицательных отступов лучше попросту отказаться.

Отрицательный отступ может также, напротив, вызвать наложение содержимого на свободно размещенный объект. Для этих случаев спецификация CSS 2.1 содержит различные правила в отношении встроенных и блочных прямоугольников.

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

Свойство clear. Пропуск размещаемых элементов …

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

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

Свойство:: clear
Значения:: left | right | both | none | inherit
Начальное значение:: none
Применимо:: К элементам уровня блока
Наследуется:: Нет

Свойство clear применимо лишь в отношении элементов уровня блока. Лучше всего показать это на несложном примере. Значение свойства left позиционирует данный элемент ниже, чем любой элемент, прижатый к левому краю охватывающего блока.

Описанное в этом примере правило гарантирует, что заголовки первого уровня начинаются в документе ниже, чем расположенные у левого края свободно размещенные элементы (рис. 5).

Код:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="content-type" content="text/html; charset=windows-1251">

<title>Пропуск элементов с левого края</title>

<style>

</style>

</head>
<body>

<p><img src="back_up.gif" alt="" />Одна за другой представлялись ей картины близкого прошедшего — болезни и последних минут отца.</p>
<h1>Ночь была тихая и свежая.</h1>
<p>И с грустною радостью она теперь останавливалась на этих образах, отгоняя от себя с ужасом только одно последнее представление его смерти, которое — она чувствовала — она была не в силах созерцать даже в своем воображении в этот тихий и таинственный час ночи.</p>

</body>
</html>

(рис. 5). Пропуск элементов с левого края.

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

Технически спецификация CSS 2.1 требует от пользовательских агентов добавлять дополнительные промежутки над отступами элементов уровня блока, пока верхний край содержимого не окажется ниже свободно размещаемого объекта.

Глядя на (рис. 5), заметьте, что, хотя h1 сверху имеет отступ, текст элемента соприкасается с нижней частью изображения. Это результат свертки вертикальных отступов в h1.

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

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

Tn Pegas