CSS-свойство float. Плавающие элементы. Отмена обтекания

CSS-свойство float определяет, с какой стороны текст будет обтекать элемент, для которого оно указано. Это свойство используется довольно часто для оформления статей картинками, которые должны быть сбоку от текста. Но этим не исчерпывается применение css-свойства float - например, такой популярный фреймворк, как Bootstrap в 3-й версии использовал это свойство для построения колонок адаптивной сетки.

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

Значения свойства float

Допустимыми значениями css-свойства float являются:

Элементы, для которых задано свойство float со значением left или right, получили название "плавающих". У них есть ряд особенностей, которые обязательно нужно знать и учитывать при верстке html-страницы.

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

Обтекание элементов текстом

Как правило, элементы нужно смещать вправо или влево, поэтому широко используют свойство  float со значением left или right. В популярных CMS для размещения картинок слева или справа от текста статьи существуют свои встроенные стили, аналог которых мы применим в примере ниже:

Использование плавающих блоков при верстке страницы

Но картинки - не единственный вариант использования css-свойства float, хотя и наиболее широко применяемый. Например, с помощью свойств float: left и float: right можно оформить шапку, основной контент и подвал страницы:

В шапке этой тестовой страницы использован следующий код:

Поскольку элементы шапки, заключенные в тег header, имеют небольшую ширину, для них можно не указывать свойство width - при использовании для этих элементов свойства float: left или float: right ширина этих блочных элементов уменьшается автоматически до их содержимого.

Для основной части страницы код выглядит так:

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

И, наконец, в подвале этой нехитрой страницы использован следующий код:

В подвале страниц - тег footer - мы видим также 2 элемента с разными значениями свойства float. При этом ширина задана только для второго из них, т.к. содержимое первого блока с классом copy невелико.

Кстати, со способами создания верстки на основе css-свойства float вы можете познакомиться в статье "Виды 2-хколоночных макетов на основе свойства float".

Отмена обтекания

Возможно, вы были настолько наблюдательны, что заметили в разметке для каждого из основных элементов  наличие класса "clearfix", который не был описан ни в одном стиле. Дело в том, что плавающие элементы не зря были так названы. Они "подплывают" к элементу с float: left или right, если рядом с ним есть свободное пространство. Это очень "ломает" внешний вид верстки и создает лишнюю головную боль для верстальщика.

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

Обратите внимание на высоту футера в Инспекторе свойств браузера Chrome (выделено красной рамкой) - она равна нулю:

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

Для того чтобы посмотреть на изменения сначала отметьте пункт "Без отмены обтекания", а затем выберите любой другой. На самом деле вы должны увидеть, что глобальной визуальной разницы между 3-мя способами отмены обтекания нет.

Протестировать пример можно и даже желательно в отдельной вкладке.

Способ 1. Отмена обтекания с помощью свойства clear

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

Допустимые значения для css-свойства clear таковы:

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

Чтобы выполнить отмену обтекания с использованием свойства clear, необходимо какому-либо элементу, расположенному после плавающих блоков в элементе-контейнере, назначить это свойство. Чаще всего для этого используют <div>, а также <p> или <br>, если далее идет текст.

В примере выше в самый низ каждого из контейнеров с плавающими элементами (header, main, footer) был добавлен <div class="clear"></div>, для которого назначено свойство clear: both. На рисунке в Инспекторе свойств видны все элементы и правила для .clear:

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

Способ 2. Отмена обтекания с помощью свойства overflow

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

Есть тут только один недостаток - при использовании overflow: hidden возможны ситуации, когда абсолютно позиционированные элементы могут "уйти" под границы контейнера и не отображаться совсем или быть видимыми наполовину.  Для overflow: auto важно, чтобы вы либо не задавали высоту родителя явно, либо задавали ее с неким запасом, иначе при уменьшении экрана в родительский элемент может быть добавлена полоса прокрутки.

Способ 3. Отмена обтекания с помощью класса clearfix

Изначально в коде примера для нормального отображения содержимого (контента) основных элементов был использован популярный класс clearfix, придуманный в свое время разработчиком Николасом Галахером (Nicolas Gallagher). Этот класс сам по себе никаких css-правил не имеет. Они задаются для псевдоэлементов этого класса :before и :after:

В Инспекторе свойств это выглядит так:

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

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

Плюсом использования класса clearfix является то, что не нужно добавлять никаких лишних элементов в html-разметку, а также никаких дополнительных полос прокрутки или обрезанных элементов он не дает.

Этот класс стал настолько популярен, что вошел в сборку таких фреймворков, как Bootstrap и Foundation, поэтому имеет смысл использовать его именно с таким названием.