|
||
|
aranea.ru || Спецификация CSS2 | 9.5. Плавающее перемещение.
9.5. Плавающее перемещение.9.5.1. Позиционирование плавающего блока: свойство 'float'.9.5.2. Управление плавающим перемещением следующего блока за перемещающимся: свойство 'clear'. Плавающее перемещение - блок, который смещается налево или направо в текущей строке. Большинство интересных характеристик плавающего перемещения (или "плавающего блока") состоят в том, что содержание может смещаться вдоль его сторон (или это запрещается свойством 'clear'). Содержание смещается на правую сторону у левостороннего блока и – на левую сторону у правостороннего блока. Следующая информация является введением в позиционирование плавающего смещения и расположение содержания; точные правила, управляющие поведением смещения даны в описании свойства 'float'. Смещенный плавающий блок должен иметь установленную ширину (присвоенную свойством 'width', или его внутренней шириной в случае замещенных элементов). Любой плавающий блок становится блочным блоком, который смещается налево или направо до тех пор, пока его внешний край не коснется края объемлющего блока или внешнего края другого смещенного плавающего блока. Вершина плавающего блока выравнивается с вершиной блока текущей строки (или низом предыдущего блочного блока, если не существует строчного блока). Если нет достаточного горизонтального пространства в текущей строке для плавающего смещения, то блок смещается под низ, строка за строкой, пока у строки есть пространство. Поскольку плавающий блок отсутствует в размещении, то не позиционированные блочные блоки, созданные перед и после плавающим блоком идут вертикально, как если смещение не существует. Однако, строчные блоки, созданные следующими после плавающего, укорачиваются для создания места под плавающий блок. Любое содержание в текущей строке перед плавающим блоком переходит в первую доступную строку на следующей стороне плавающего смещения. Несколько плавающих блоков могут соседствовать, и эта модель также применяется для смежных плавающих блоков в одной и той же строке. Следующее правило смещает все блоки IMG с class="icon" налево (и устанавливает левый край равным '0'):
IMG.icon {
float: left;
margin-left: 0;
}
Рассмотрите HTML-источник и стилевую информацию:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>
<HEAD>
<TITLE>Float example</TITLE>
<STYLE type="text/css">
IMG { float: left }
BODY, P, IMG { margin: 2em }
</STYLE>
</HEAD>
<BODY>
<P><IMG src=img.gif alt="This image will illustrate floats">
Some sample text that has no other...
</BODY>
</HTML>
Блок IMG смещается налево. Содержание, которое следует ниже, форматируется справа от смещения, начиная с то же строки, что и плавающий блок. Строчные блоки справа от плавающего укорачиваются из-за присутствия смещения, но восстанавливают свою "нормальную" ширину (ширину объемлющего блока, учрежденного элементом Р) после смещения. Этот документ мог бы быть отформатирован следующим образом:  [D]Форматирование было бы точно таким же, если документ был бы:
<BODY>
<P>Some sample text
<IMG src=img.gif alt="This image will illustrate floats">
that has no other...
</BODY>
так как содержание слева от смещения показывается со смещением и передвижением на правую сторону. Поля плавающих блоков никогда не сминаются с полями соседних блоков. Таким образом, в предыдущем примере, вертикальные поля не сминаются между блоком Р и смещенным блоком IMG. Смещение может накладываться на другие блоки в нормальном положении (например, когда блок с нормальным расположением следует за плавающим смещением, и плавающий блок имеет отрицательные поля). Когда внутристрочный блок накладывается на плавающий, то содержание, фон и границы внутристрочного блока визуализируются спереди от плавающего смещения. Когда блочный блок накладывается, то фон и границы блочного блока визуализируются позади плавающего смещения и видны только там, где блок прозрачен. Содержание блочного блока визуализируется спереди от плавающего смещения. Ниже приведена другая иллюстрация, показывающая, что происходит, когда смещение накладывается на границы элементов в нормальном расположении:  [D] Смещающаяся иллюстрация затеняет границы блочных блоков, которые она перекрывает. Следующий пример иллюстрирует использование свойства 'clear' для предохранения перехода содержания вслед за плавающим смещением. Допустим следующее правило:
P { clear: left }
форматирование должно выглядеть следующим образом:  [D]Оба параграфа установлены, как 'clear:left', что приводит к тому, что второй параграф "сдавливается вниз" на позицию ниже смещения – его верхнее поле расширяется в связи с этим (смотрите свойство 'clear'). 9.5.1. Позиционирование плавающего блока: свойство 'float'.
'float'
Тип значения: left | right | none | inherit
Начальная величина: нет
Применяется: ко всем элементам, кроме
сгенерированных и позиционированных
Наследование: нет
Процентная база: нет
Медиа: визуальные
Это свойство определяет, смещается ли блок влево, вправо или нет. Устанавливается для элементов, которые формируют блоки, не позиционированные абсолютно. Это свойство имеет следующие значения:
Ниже приведены точные правила, которые управляют поведением смещения:
9.5.2. Управление плавающим перемещением следующего блока за перемещенным: свойство 'clear'.'clear' Тип значения: none | left | right | both | inherit Начальная величина: нет Применяется: к элементам блокового уровня Наследование: нет Процентная база: нет Медиа: визуальные Это свойство указывает на то, какая сторона блока(блоков) элемента не может быть соседней для предыдущего плавающего блока. (Возможно, что элемент сам имеет плавающих наследников; и свойство 'clear' не имеет влияния на них). Это свойство может определяться только для блочных элементов (включая плавающие блоки). Для компактных и вставляемых (run-in) блоков это свойство применяется для последнего блочного блока, которому компактный или run-in блок принадлежит. Свойство имеет следующие значения, когда применяется для не смещаемых блочных блоков:
Когда свойство устанавливается для плавающих элементов, то оно формирует модификацию правил для позиционирования плавающего смещения. Добавляется жесткое ограничение (№10):
|
