CSS свойство float.

Опубликовано: 21 февраля 2014      Автор:

Это CSS свойство позволяет определять сторону окна документа, относительно которой будет выравниваться форматируемый элемент веб-страницы. Такое выравнивание подразумевает обтекание (float) смещаемого элемента другими, соседними элементами с противоположной стороны. Свойство float может принимать значения, указанные ниже:

  • left — элемент прижимается к левой границе окна документа, с обтеканием соседними элементами с правой стороны.
  • right — элемент прижат к правой части и обтекается соседними с левой стороны.
  • none — отмена обтекания элемента (установлено по умолчанию).
  • inherit — значение этого свойства наследуется от родительского элемента.

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

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

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

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

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

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

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

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

Теперь давайте рассмотрим вопрос, касающийся отмены действия свойства float, который тоже имеет несколько нюансов.

Чтобы отменить обтекание смещенного элемента необходимо применить свойство clear для следующего элемента, который уже не должен участвовать в обтекании. Причем значения данного свойства позволяют отменять правое, левое и оба обтекания одновременно: left, right, both. Значение none отменяет предыдущие установки свойства clear и условия обтекания элемента определяются значением свойства float. А значение inherit устанавливает значение аналогичного свойства родительского блока.

Помимо стандартного метода отмены действия свойства float можно воспользоваться другим способом. Ниже приведены возможные варианты:

  • Установить значение float и для родительского элемента. По причине, неоднозначного отображения таких элементов различными браузерами, этот метод лучше не использовать.
  • Задать свойство overflow: hidden для родительского блока, что автоматически установит высоту контейнера с учетом плавающего дочернего элемента. И следующие элементы в потоке документа не будут обтекать блок, а сместятся ниже его.
  • Воспользоваться возможностью генерации контента с помощью CSS свойства content в контексте родительского блока с использованием псевдо класса :after. Этот способ подразумевает размещение псевдо элемента после плавающего блока, тем самым смещая нижнюю границу его родительского объекта за пределы обтекаемого элемента. Но генерируемый псевдоэлемент должен быть блочным (display: block) и дополнительно отформатирован как невидимый элемент страницы с нулевой высотой (height: 0; visibility: hidden;), чтобы он не отображался на странице. К нему также необходимо применить свойство clear: both, что, как уже упоминалось выше, отменяет любое обтекание плавающего блока.

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