Плавающие элементы и очистка

Дополнительные плавающие элементы

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

1. Добавьте новое правило в таблицу стилей, сохраните и обновите страницу как и раньше:

#span-b {
  float: left;
  background-color: #ccf;
  color: #003;
  padding: 1em;
}

Теперь элемент span, содержащий слова "dolor sit amet", также смещается влево. Вы увидите, что он смещается влево, пока не коснется первого плавающего элемента; другими словами, "насколько возможно".

2. Зачем останавливаться на двух плавающих элементах? Давайте сделаем третий - добавим следующее правило в таблицу стилей:

#span-c {
  float: left;
  background-color: #fcc;
  color: #300;
  padding:2em 1em;
}

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

span {
  width: 34%;
}

4. Как и раньше, сохраните таблицу стилей и обновите документ в браузере - вы увидите что-то похожее на вывод, показанный на рис 35.3.(рис 35.3) Не совсем то, что ожидали?

Ну! Что же произошло? Третий плавающий элемент теперь оказался ниже второго! (А браузер Internet Explorer 6 делает другую странную вещь, которую мы пока проигнорируем.) Так как ширина каждого элемента span составляет 34% от ширины параграфа (как определено правилом, добавленным на шаге 3), плюс некоторое заполнение, то пространства для всех трех в строке не хватает (3 x 34% = 102%). Два первые плавающие элемента находятся на одной линии, но для третьего места не хватает, и он сдвигается вниз. Важно то, что он сдвигается вниз только настолько, чтобы поместиться в строке. Он не сдвигается вниз ниже высокого первого плавающего элемента, так как справа от него имеется пространство.

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

Поля плавающих элементов

Теперь посмотрим, что можно делать с полями плавающих элементов.

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

span {
  width: 34%;
}

Теперь плавающие элементы тесно соединены вместе, и смежный текст начинается сразу после последнего плавающего элемента (если только вы не используете Microsoft Internet Explorer 6 или более старый, в этому случае появляется 3-пиксельный зазор справа в связи с трех-пиксельной ошибкой соединения). Как можно создать некоторое пространство вокруг плавающего бокса? Ответом будут поля!

2. Давайте сделаем это на среднем плавающем элементе - измените правило CSS для среднего плавающего элемента следующим образом, затем сохраните и обновите:

#span-b {
  float: left;
  background-color: #ccf;
  color: #003;
  padding: 1em;
  margin-left: 1em;
  margin-right: 1em;
}

Ага, теперь появилось некоторое пространство по обеим сторонам среднего плавающего элемента.

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

#span-c {
  float: left;
  background-color: #fcc;
  color: #300;
  padding:2em 1em;
  margin-top: 2em;
  margin-bottom: 2em;
}

Это заставляет третий плавающий элемент переместиться вниз, и также имеется некоторое дополнительное пространство ниже его.

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

#span-c {
  float: left;
  background-color: #fcc;
  color: #300;
  padding:2em 1em;
  margin-top: 2em;
  margin-bottom: 2em;
  margin-left: -4em;
}

Вы увидите теперь вывод, показанный на рис 35.4.(рис 35.4) Теперь плавающие элементы перекрывают друг друга!

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

Очистка

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

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

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

Свойство clear имеет три используемых значения: left, right и both. Также допустимыми значениями являются значения none (по умолчанию) и inherit.

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

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

1. Прежде чем делать это, давайте изменим таблицу стилей. Удалите правила для #span-b и #span-c, так чтобы слева остался только зеленый плавающий элемент. Проверьте, что его нижнее заполнение достаточно большое, чтобы распространиться на второй параграф.

2. Добавьте следующее правило для второго параграфа, затем сохраните и обновите:

#p2 {
  clear: left;
}

Видите! Второй параграф смещается вниз, пока не освободится полностью от плавающего элемента, как видно на рис 35.5.(рис 35.5) Второй параграф теперь смещен ниже первого

Чтобы еще больше все запутать, можно использовать float и clear в одном элементе.

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

#span-b {
  float: left;
  clear: left;
  padding: 1em;
  background-color: #ccf;
  color: #003;
}

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

Контейнерные плавающие элементы

Как вы видели выше, бокс предок обычно не расширяется, чтобы охватить плавающего потомка. Это часто может создавать путаницу, например, когда все потомки элемента являются плавающими, когда создается горизонтальное меню из неупорядоченного списка, делая плавающими все элементы li. Так как плавающие боксы извлекаются из потока и не влияют на бокс предок, то все плавающие потомки делают по сути предка пустым и он схлопнется до нулевой высоты. Иногда это нежелательно, например, если вы хотите задать для предка фон. Если предок имеет нулевую высоту, то никакой фон не будет виден.

Очевидно, что нужен некоторый механизм, позволяющий расширить бокс предок, чтобы он охватил своих плавающих потомков. Традиционный метод состоит в добавлении в разметку дополнительного элемента, сразу перед закрывающим тегом предка, и задание на нем clear:both. Это работает, но это недостаточно хорошо, так как включает использование дополнительной ненужной, несемантической разметки. К счастью имеются другие способы, которые будут сейчас рассмотрены.

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

1. Чтобы проверить это в нашем примере документа, снова удалите правило для #span-b, и сделайте следующим образом первый параграф плавающим, прежде чем сохранить и обновить:

#p1 {
  float: left;
}

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

2. Замените последнее правило следующим, затем сохраните и обновите страницу:

#p1 {
  overflow: hidden;
}

Отметим, что последний метод не работает в браузере Internet Explorer 6 или более старой версии.

Заключение в оболочку

Я упоминал ранее, что превращение строкового бокса в плавающий делает его блочным боксом, позволяя тем самым определить для него размеры и вертикальные поля. Плавающий блочный бокс также имеет удивительные свойства: если ширина не определена, то бокс будет сжиматься "создавая оболочку" вокруг своего контента. Это не было видно в примере документа, когда плавающим был сделан первый параграф, так как он имел достаточное количество контента, чтобы заполнить все окно (если только у вас не слишком широкий монитор).

Давайте сделаем плавающим последний параграф, чтобы увидеть результат. Фактически, просто чтобы внести некоторое разнообразие, давайте сместим его вправо!

Добавьте следующее правило в таблицу стилей, затем сохраните и обновите страницу:

#p3 {
  float: right;
}

Параграф, который содержит "Hello, World!", будет теперь смещаться вправо, и будет иметь ширину имеющегося текста плюс некоторое заполнение, которое было определено в предыдущем правиле для всех параграфов.

Центрирование плавающего элемента

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

Такое решение имеется. Специалист по CSS Поль О'Брайен объясняет, как это можно сделать, в своей статье "Когда float не является float"? (http://www.search-this.com/2007/09/19/when-is-a-float-not-a-float/). Это включает дополнительный элемент оболочки, но с этим можно смириться. Метод использует относительное позиционирование, которое мы рассмотрим в следующей статье о статическом и относительном позиционирование CSS. Смещая элемент оболочки вправо, а затем смещая плавающий элемент снова влево, вы можете в действительности центрировать завернутый в оболочку плавающий элемент неизвестной ширины!

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

1. Вставьте следующую разметку сразу после тега <body> в документе HTML:

<div class="wrap">
<ul id="menu">
    <li><a href="#">Home</a></li>
    <li><a href="#">News</a></li>
    <li><a href="#">Products</a></li>
    <li><a href="#">Services</a></li>
  </ul>
</div>

<!--Internet Explorer needs this-->
<div class="clear" > </div>

2. Добавьте следующие правила CSS в таблицу стилей, чтобы оформить меню:

#menu {
  margin: 0;
  padding: 0.5em;
  font-family: Verdana,sans-serif;
}

#menu li {
  float: left;
  list-style-type: none;
  margin: 0 0 0 0.5em;
  padding: 0.25em;
  background-color: #600;
  color: #ff9;
  border: 2px solid #f00;
}

#menu a {
  color: #ff9;
  text-decoration: none;
}

.wrap {
  float: left;
  margin-bottom: 2em;
}

.clear {
  clear: left;
  height: 1px;
  margin-top: -1px;
}

3. Сохраните оба файла и обновите страницу в браузере. Вы увидите свое меню в верхнем левом углу. Давайте сделаем его горизонтально центрированным.

4. Сместите элемент оболочки на половину страницы, модифицируя правило для .wrap, как показано ниже:

.wrap {
  float: left;
  margin-bottom: 2em;
  position: relative;
  left: 50%;
}

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

5. Модифицируем правило #menu следующим образом:

#menu {
  margin: 0;
  padding: 0.5em;
  font-family: Verdana,sans-serif;
  position: relative;
  left: -50%;
}

Меню теперь центрировано; единственная проблема состоит в том, что вы можете получить горизонтальную панель прокрутки в зависимости от ширины списка и окна браузера. Это связано с тем, что вы сместили элемент оболочки на половину экрана; если список будет шире половины окна, часть его окажется за пределами экрана.

6. Можно избавиться от этого, задавая свойство overflow:hidden на подходящем элементе предке, чтобы сделать переполнение скрытым. В этом случае предком оболочки является body. Иногда невозможно скрыть переполнение на элементе body, и в этом случае нужно будет создать оболочку для оболочки, однако в данном случае все нормально.

Добавьте следующее правило в таблицу стилей:

body {
  overflow: hidden;
}

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

Добавьте следующее правило в таблицу стилей:

* html #menu {
  float: left;
}

Ошибки!

Плавающие элементы и очистка являются очень полезными, но, к сожалению, большинство - если не все - браузеры имеют ошибки реализации этих свойств. Internet Explorer 6 содержит огромный массив странного поведения с плавающими элементами, включая исчезающий контент, удвоение полей и печально известную ошибку с 3-пиксельным зазором. Но даже Firefox и Opera не полностью свободны от ошибок, когда речь идет о плавающих элементах и очистке. Сайт Position Is Everything (http://positioniseverything.net/) является бесценным источником, где документируются эти ошибки - вместе со средствами их обхода в большинстве случаев.

Заключение

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

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

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

Центрирование плавающего бокса в оболочке возможно с помощью добавления элемента оболочки и некоторого осмотрительного использования относительного позиционирования.

Контрольные вопросы

Об авторе

Томми Олссон является прагматичным пропагандистом стандартов Web и доступности, который живет в малонаселенной области центральной Швеции. Он написал свой первый документ HTML в 1993 г. и является в настоящее время техническим Web-мастером для правительственного агентства Швеции.

Он написал пока одну книгу - Полный справочник по CSS (совместно с Полем О'Брайеном) - и поддерживает крайне нерегулярно блог с названием Кукушка-аутист (http://www.autisticcuckoo.net/).