Справочник · CSS

float: обтекание текстом

Редакция PraktumОбновлено 24 октября 20266 мин чтенияУровень: новичок

Свойство float прижимает элемент к левому или правому краю контейнера, а текст и строчные элементы обтекают его с другой стороны — как картинку в журнальной статье. Значения: left, right и none. Раньше float использовали для колонок сайта, сейчас для раскладки есть Flexbox и Grid, а float остался для обтекания.

Минимальный пример

.article img.left {
  float: left;
  width: 240px;
  margin: 4px 20px 12px 0;
}

<div class="article">
  <img class="left" src="/images/clay.webp" alt="Мастер у гончарного круга" width="240" height="180">
  <p>Текст абзаца обтекает фотографию справа, а когда она заканчивается, занимает всю ширину…</p>
</div>

Картинка прижата к левому краю, текст идёт справа от неё и под ней, когда она закончилась. Отступ справа и снизу не даёт тексту прилипать к фотографии.

Значения float

Плавающий элемент становится блочным: у строчного span с float начинают работать width и height. Внутри flex- и grid-контейнера float игнорируется.

Почему родитель схлопывается

/* родитель не видит плавающую картинку и становится ниже неё */
.media { border: 1px solid #ddd; }
.media img { float: left; }

/* решение: родитель обнимает плавающих детей */
.media { display: flow-root; }

Плавающий элемент выходит из обычного потока для блоков: родитель считает свою высоту только по остальному содержимому. Если внутри одна картинка с float, рамка и фон родителя сжимаются, а картинка торчит снизу. display: flow-root создаёт новый контекст форматирования, и родитель снова учитывает плавающих детей. Раньше для этого писали «clearfix» с псевдоэлементом или overflow: hidden.

clear: остановить обтекание

.article h2 { clear: both; }   /* заголовок раздела ниже картинки */
.note { clear: left; }          /* ниже только левых плавающих */

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

Обтекание по форме: shape-outside

.avatar-float {
  float: left;
  width: 160px;
  height: 160px;
  border-radius: 50%;
  shape-outside: circle(50%);
  margin-right: 20px;
}

По умолчанию текст обтекает прямоугольник элемента. shape-outside задаёт настоящую форму обтекания: круг, эллипс, многоугольник или контур картинки с прозрачностью. Работает только у плавающих элементов.

float для раскладки — это прошлое

/* так верстали раньше */
.col { float: left; width: 33.333%; }
.row::after { content: ""; display: table; clear: both; }

/* так сейчас */
.row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }

До Flexbox и Grid колонки сайта строили на float и чинили схлопывание «clearfix». Такой код встречается в старых проектах и шаблонах. Для новых раскладок он не нужен: float не умеет выравнивать по высоте, не даёт gap и ломается от длинного содержимого. Если видишь float в сетке — это кандидат на переписывание на Grid.

float на узком экране

.article img.left { float: none; width: 100%; margin: 0 0 16px; }

@media (min-width: 40rem) {
  .article img.left { float: left; width: 240px; margin: 4px 20px 12px 0; }
}

На телефоне рядом с картинкой шириной 240px останется узкая полоска в пару слов на строку. Обычно на узком экране обтекание отключают, а картинку ставят во всю ширину над текстом.

float или flex

Частые ошибки

• Строят колонки сайта на float вместо Flexbox или Grid.
• Не учитывают схлопывание: рамка и фон родителя не обнимают плавающую картинку.
• Забывают отступ у плавающей картинки, и текст прилипает к ней.
• Оставляют обтекание на телефоне, и текст рядом превращается в столбик из слов.
• Пишут float детям flex-контейнера и удивляются, что ничего не меняется.

Доступность

float меняет только положение, порядок чтения остаётся как в HTML. Ставь плавающую картинку в коде рядом с текстом, к которому она относится, и давай ей осмысленный alt. На узких экранах отключай обтекание — узкую колонку текста тяжело читать всем, особенно при увеличенном шрифте.

Поддержка браузерами

float и clear работают во всех браузерах. display: flow-root, shape-outside и логические значения inline-start и inline-end поддерживаются актуальными версиями браузеров.

.article { display: flow-root; border: 1px solid #e5e7eb; padding: 16px; }
.article img.left { width: 100%; margin-bottom: 16px; }
.article h2 { clear: both; }

@media (min-width: 40rem) {
  .article img.left { float: left; width: 240px; margin: 4px 20px 12px 0; }
}