Плавающие элементы. Свойство float
- 29 марта 2014
Плавают элементы, определенные тегами, для которых в CSS задано свойство float
.
float: left | right | none; /* Прим. если значение none - то элемент не плавающий *
В зависимости от значения, элемент прижимается соответствующей стороной (внешней кромкой) к внутренней кромке родительского элемента или к другому плавающему элементу. Строчные контейнеры, следующие за ним, будут обтекать плавающий контейнер с противоположной стороны и снизу.
Все блочные элементы, вне зависимости от размеров, в потоке содержимого начинаются с новой строки, после чего поток возобновляется опять с новой строки. Иными словами, блоки располагаются друг под другом.
Применение свойства float
позволяет располагать блоки горизонтально, рядом друг с другом (элемент с заданным значением float
автоматически становится блочным), что дает нам большие возможности при макетировании страницы.
При этом плавающие элементы удаляются из общего потока, и остальные блочные контейнеры ведут себя так, как будто плавающих элементов не существует.
Проще понять на примере:
Сюрприз 1. У содержащего блока исчез фон.
Контейнер-обертка, которому не задана высота, схлопнулся (горизонтальная черта над блоками - слившиеся верхняя и нижняя линии рамки), т.к. все содержащиеся в нем блоки плавающие, а значит их нет в общем потоке и отношение к ним соответствующее - как к пустому месту.
Достаточно распространенная проблема при верстке :)
Существует несколько решений.
1. Сделать содержащий контейнер-обертку тоже плавающим, задав для него свойство float
. Тогда он будет относится к вложенным блокам как к "своим". Большое количество плавающих элементов может значительно усложнить верстку.
2. Установить контейнеру-обертке свойство overflow: hidden | auto
. Это свойство влияет на поведение контейнера, поэтому возможны побочные эффекты.
3. Очистка с помощью свойства clear: both | left | right
. Для этого должен быть элемент, следующий за плавающими блоками, которому это свойство можно было бы присвоить, например параграф p
или блок div
.
Создавать с целью очистки дополнительную разметку - тоже не самое хорошее решение.
4. Очистка с помощью псевдоэлемента :after
.
.clearfix:after { display: table; line-height: 0; content: ""; clear: both; }
Осталось присвоить этот класс контейнеру обертке
<div class="clearfix"> ... </div>
и мы получим вместо реального блочного элемента, псевдоэлемент очистки.
Сюрприз 2. Сползание блоков вниз, которым надлежит располагаться горизонтально.
Третий блок не поместился по горизонтали и был перенесен вниз. Но "зацепился" за первый блок и пристыковался к его правой кромке. Почему?
Суммарный размер ширины блоков + отступы + рамки превышает ширину содержащего блока или страницы.
Подходящий пример того, как изменение размера плавающего элемента может разрушить страницу.
Всегда старайтесь явно задавать размеры плавающим контейнерам.
Строчные контейнеры, расположенные рядом с плавающими, укорачиваются таким образом, чтобы предоставить место для плавающих. При этом строчный контейнер обтекает плавающий блок.