float — это свойство CSS, которое вынимает элемент из обычного потока и прижимает его к левому или правому краю контейнера, а остальной текст и строчные элементы обтекают его сбоку. Проще всего представить картинку в статье, вокруг которой сверстан абзац: именно это делает float.
Содержание
Сразу разведу омоним, иначе легко запутаться. В языках программирования (C, Java, JavaScript и других) float — это тип данных, число с плавающей точкой. Это совсем другое понятие: тип хранит дробное число в памяти, а свойство CSS управляет расположением элемента на странице. Дальше речь только про CSS.
Разберу значения float (left, right, none, inherit), покажу обтекание картинки текстом, объясню, почему контейнер с плавающими детьми схлопывается, и как это чинит clearfix. В конце — граница применимости на 2026 год: где float уместен, а где давно пора брать flexbox или grid.
Что делает float и его значения
Обычные блочные элементы идут сверху вниз, каждый на своей строке. Как только элементу задан float, он выпадает из этого потока, прижимается к краю родителя, а следующий за ним контент поднимается вверх и обтекает его с открытой стороны.
Значений у свойства немного:
| Значение | Что делает |
|---|---|
left |
элемент прижимается к левому краю контейнера, контент обтекает справа |
right |
элемент прижимается к правому краю, контент обтекает слева |
none |
значение по умолчанию, элемент остается в обычном потоке (не плавает) |
inherit |
берет значение float от родителя |
Уточню границу: left, right, none — это собственные значения float. inherit — это общее CSS-ключевое слово, оно работает почти для любого свойства, не только для float (рядом с ним есть initial, unset, revert). Кроме того, в современных браузерах у float появились логические значения inline-start и inline-end — они привязаны к направлению письма, а не к физическим сторонам, и удобны для right-to-left языков.
float применяется почти ко всем элементам, но не сработает, если у элемента display: none — тогда его просто нет на странице.
Обтекание картинки текстом: рабочий пример
Начну с минимального примера, который можно скопировать и открыть в браузере. Картинка прижата влево, абзац обтекает ее справа.
<div class="article">
<img class="figure" src="cat.jpg" alt="Рыжий кот">
<p>
Это обычный абзац статьи. Картинке задано float: left, поэтому
она уходит к левому краю, а весь текст поднимается наверх и
красиво обтекает ее справа. Так верстают иллюстрации внутри
статей - самый частый и уместный сценарий для float.
</p>
</div>.figure {
float: left;
width: 200px;
margin: 0 16px 8px 0; /* отступ справа и снизу, чтобы текст не липнул */
}Результат в браузере: картинка стоит слева, текст начинается справа от нее на той же высоте и, когда опускается ниже картинки, снова занимает всю ширину. Отступ margin справа нужен обязательно, иначе буквы будут вплотную к изображению.
Если поменять на float: right, картинка уйдет к правому краю, а текст будет обтекать ее слева — тогда и отступ логично перенести на левую сторону (margin: 0 0 8px 16px).
Схлопывание контейнера: главная ловушка
С float связана типичная проблема новичков. Когда у контейнера все дети плавающие, он теряет высоту и схлопывается почти в линию. Причина: плавающие элементы вынуты из потока, и родитель их «не считает» при расчете своей высоты.
<div class="box">
<div class="card">Карточка внутри контейнера</div>
</div>.card {
float: left;
width: 150px;
height: 100px;
}
.box {
border: 3px solid red; /* ожидаем рамку вокруг карточки */
}Ожидание: красная рамка обходит карточку. Фактический результат: рамка схлопывается в тонкую красную полоску сверху, высота .box равна нулю, потому что единственный ребенок — плавающий и не участвует в высоте родителя. Если ниже идет футер или другой блок, он заедет под карточку.
Как чинить: clearfix и flow-root
Есть два свойства и один прием, которыми контейнеру возвращают высоту.
Свойство clear отменяет обтекание для конкретного элемента: он не поднимается рядом с плавающим, а сдвигается вниз под него. Значения: left, right, both (сброс с обеих сторон), none (по умолчанию). Чаще всего нужен both.
Классический прием — clearfix: добавить контейнеру псевдоэлемент ::after, который очищает обтекание изнутри. Он много лет был стандартом и до сих пор встречается в чужом коде:
.box::after {
content: "";
display: block;
clear: both;
}Как это работает: ::after создает пустой блок в самом конце контейнера, а clear: both заставляет этот блок опуститься ниже всех плавающих детей. В результате контейнер растягивается до их высоты, и рамка снова обходит карточку.
Современный способ (2026) короче и не требует псевдоэлемента — display: flow-root на контейнере:
.box {
display: flow-root; /* контейнер сам содержит свои плавающие элементы */
border: 3px solid red;
}flow-root создает у контейнера новый контекст форматирования, и он начинает учитывать плавающих детей в своей высоте. Свойство поддерживается всеми актуальными браузерами и в новом коде предпочтительнее clearfix. Раньше для той же цели ставили overflow: hidden или overflow: auto, но это побочно обрезает или добавляет прокрутку — flow-root делает то же самое без побочных эффектов.
| Способ | Когда брать |
|---|---|
display: flow-root на контейнере |
новый код, лучший выбор в 2026 |
clearfix через ::after { clear: both } |
поддержка старого кода, где так уже сделано |
overflow: hidden/auto |
быстрый хак, но может обрезать контент или дать прокрутку |
пустой <div style="clear: both"> |
устаревший прием, добавляет лишнюю разметку, не использовать |
Граница применимости: float в 2026
Исторически float был главным инструментом для раскладки страниц: колонки, сайдбары, сетки макетов собирали именно на нем, потому что других средств не было. Отсюда и раздутая репутация свойства.
Сегодня это устарело. Для раскладки страниц и компонентов есть flexbox (одномерные ряды и колонки) и grid (двумерные сетки) — они не выпадают из потока, не требуют clearfix и управляют выравниванием и промежутками напрямую. Верстать многоколоночный макет на float в новом проекте не нужно.
За float остается его исходная и по-прежнему живая задача — обтекание: врезать картинку или подпись в текст так, чтобы абзац обходил ее сбоку. Ни flexbox, ни grid этого не умеют, потому что не смешивают блок со строками текста. Короткое правило: float — для обтекания текста, flexbox и grid — для раскладки.
Выводы
- CSS-свойство float прижимает элемент к левому или правому краю контейнера, а остальной контент обтекает его сбоку; это не тип данных float из языков программирования, а другое понятие с тем же словом.
- Значений всего четыре: left, right, none и inherit; выпавший из нормального потока плавающий элемент перестает растягивать родителя по высоте.
- Главная ловушка float — схлопывание контейнера: если все дети плавающие, родитель получает нулевую высоту, и следующий блок заезжает наверх.
- Чинить схлопывание в 2026 году правильнее всего через display: flow-root на контейнере; clearfix через ::after нужен только для поддержки старого кода.
- Для раскладки страниц float устарел — колонки и сетки делают на flexbox и grid; за float осталась одна живая задача — обтекание текстом картинки или врезки.
Где применяется / связь с практикой
На практике float чаще всего встречается в двух ситуациях: врезка иллюстрации в статью или карточку и поддержка старого кода, где на float собран весь макет. В первом случае это правильный выбор, во втором — повод постепенно переводить раскладку на flexbox или grid.
Освойте тему на практике
Разобраться со свойствами CSS по порядку, от потока документа до flexbox и grid, и довести это до собственной верстки можно на курсе html-css в Otus. Посмотреть уровень и формат занятий, ничего не оплачивая, помогут бесплатные вебинары — там разбирают конкретные примеры верстки и отвечают на вопросы.
Смежные темы: CSS и его свойства.
FAQ
В чем разница между float и position?
float оставляет элемент в общем потоке частично: он прижимается к краю, но контент его обтекает и учитывает. position: absolute или fixed полностью вынимает элемент из потока, и соседний контент ведет себя так, будто элемента нет — обтекания не будет.
Почему футер заезжает под плавающие блоки?
Контейнер с плавающими детьми схлопнулся до нулевой высоты, и следующий блок поднялся под них. Решение — либо clear: both на футере, либо display: flow-root на общем контейнере плавающих элементов.
Можно ли задать float для строчного элемента, например span?
Да. Как только строчному элементу задан float, отличный от none, он начинает вести себя как блочный: к нему применяются width и height, а сам он прижимается к краю. Отдельно менять display для этого не нужно.
