Исполняемые доки CSS: Float и clear

Q: Что делает clear?

clear переносит элемент ниже всех предыдущих float с указанной стороны: clear: left, clear: right или clear: both. Так останавливают обтекание float содержимым.

Float и clear в CSS: обтекание картинки текстом

float прижимает элемент к одной стороне и позволяет тексту обтекать его, как фотографии в журнале. Разберем float left, right и inline-start, clear, почему родитель схлопывается вокруг float и как это исправляет display: flow-root, и почему float больше не используют для раскладки страницы.

На этой странице есть исполняемые редакторы: меняйте, запускайте и сразу видите результат.

Автор Kevin Spektor, Co-founder & CTO

Опубликовано Sep 24, 2026

Что делает float

float прижимает элемент к одной стороне контейнера и позволяет следующему за ним тексту его обтекать:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Float</title>
  <style>
    body { font-family: system-ui, sans-serif; line-height: 1.5; max-width: 520px; }
    .photo {
      float: left;
      width: 120px; height: 90px;
      margin: 4px 16px 8px 0;
      background: #bfdbfe; border: 2px solid #2563eb;
    }
  </style>
</head>
<body>
  <div class="photo" id="photo"></div>
  <p id="text">The box on the left is floated. This paragraph comes after it in the HTML, and its lines flow around the float instead of starting below it. Once the text passes the bottom of the float, the lines go back to the full width of the container, as you can see at the end of this paragraph when it is long enough to wrap below.</p>
</body>
</html>

Margin у плавающего блока не дает тексту касаться его. Этот зазор управляется именно отступами; самому тексту нельзя задать отступ в сторону float.

Значения

Значение	Результат
`none` (по умолчанию)	Без float
`left`	Прижат к левому краю
`right`	Прижат к правому краю
`inline-start`	Прижат к началу строки: слева в русском, справа в арабском или иврите
`inline-end`	Прижат к концу строки

inline-start и inline-end следуют направлению письма, поэтому раскладка на них правильно отражается на страницах справа налево. Плавающий элемент еще и становится блочным: display: inline превращается в block, поэтому width и height применяются даже к span или img.

Изображения с обтеканием текстом

Классическое применение: изображение в статье, а текст его обтекает. Прижмите по одному к каждой стороне:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Floated images</title>
  <style>
    body { font-family: system-ui, sans-serif; line-height: 1.5; max-width: 520px; font-size: 15px; }
    img { width: 110px; height: 80px; }
    .start { float: inline-start; margin-inline-end: 14px; }
    .end { float: inline-end; margin-inline-start: 14px; }
  </style>
</head>
<body>
  <p>
    <img class="start" alt="Blue square" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='110' height='80'%3E%3Crect width='110' height='80' fill='%232563eb'/%3E%3C/svg%3E">
    This image floats to the start of the line. The text of the paragraph wraps around it on the other side, and continues under it once the image ends. Floats are still the simplest tool for this magazine style layout.
  </p>
  <p>
    <img class="end" alt="Amber square" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='110' height='80'%3E%3Crect width='110' height='80' fill='%23f59e0b'/%3E%3C/svg%3E">
    This one floats to the end of the line instead. Change the direction of the page to right to left and both images switch sides with the text, because the floats use logical values.
  </p>
</body>
</html>

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

clear означает «начни ниже всех предыдущих float с этой стороны». Задайте его элементу, который не должен стоять рядом с float, например заголовку следующего раздела:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Clear</title>
  <style>
    body { font-family: system-ui, sans-serif; line-height: 1.5; max-width: 520px; }
    .box { float: left; width: 110px; height: 110px; margin-inline-end: 12px; background: #bbf7d0; border: 2px solid #16a34a; }
    h3 { margin: 8px 0; padding: 4px 8px; background: #e5e7eb; }
    .cleared { clear: both; }
    .demo { display: flow-root; margin-bottom: 20px; } /* keeps the two demos apart */
  </style>
</head>
<body>
  <div class="demo">
    <div class="box" id="box1"></div>
    <p>A short paragraph next to the float.</p>
    <h3 id="h1">This heading is not cleared</h3>
  </div>
  <div class="demo">
    <div class="box" id="box2"></div>
    <p>A short paragraph next to the float.</p>
    <h3 class="cleared" id="h2">This heading has clear: both</h3>
  </div>
</body>
</html>

Первый заголовок втискивается рядом с float. Второй начинается под ним. clear принимает left, right, both, inline-start, inline-end и none.

Схлопывающийся родитель и flow-root

Float находятся вне обычного потока, поэтому контейнер, все дочерние элементы которого плавающие, не имеет ничего в потоке и схлопывается до нулевой высоты. Его фон и рамка превращаются в тонкую линию над float:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Contain floats</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 14px; }
    .parent { border: 3px solid #dc2626; background: #fee2e2; margin-bottom: 110px; }
    .fixed { border-color: #16a34a; background: #dcfce7; margin-bottom: 0; }
    .child { float: left; width: 90px; height: 80px; margin: 6px; background: #fde68a; }
    .fixed { display: flow-root; }
  </style>
</head>
<body>
  <div class="parent" id="broken">
    <div class="child">float</div><div class="child">float</div>
  </div>
  <div class="parent fixed" id="fixed">
    <div class="child">float</div><div class="child">float</div>
  </div>
</body>
</html>

display: flow-root создает новый блочный контекст форматирования, который всегда вмещает свои float. Старый код добивается того же через «clearfix»:

.clearfix::after {
  content: "";
  display: block;
  clear: both;
}

overflow: hidden или auto тоже вмещают float, но с побочным эффектом обрезки; смотрите overflow.

Float не для раскладки

До flexbox и grid целые раскладки страниц строили из плавающих колонок, с clearfix и расчетами ширины повсюду. Эта эпоха прошла: float не умеют центрировать, не умеют делать колонки одинаковой высоты и ломаются, когда меняется размер содержимого. Для строк и колонок используйте display: flex или display: grid, а float оставьте для обтекания текстом. Чтобы центрировать изображение, а не обтекать его текстом, смотрите центрирование картинки.

Обтекание по форме

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

.avatar {
  float: left;
  width: 120px; height: 120px;
  border-radius: 50%;
  shape-outside: circle(50%);
  margin-inline-end: 16px;
}

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

Родитель с нулевой высотой. Все его дочерние элементы плавающие. Добавьте display: flow-root.
Float для колонок или навигации. Используйте flexbox или grid.
Ожидание float: center. Такого нет. Центрируйте через flexbox, grid или margin: 0 auto.
Содержимое после float обтекает его, хотя не должно. Задайте ему clear: both или поместите float и его текст в контейнер flow-root.
Физические left и right на многоязычном сайте. Используйте inline-start и inline-end, чтобы раскладка отражалась в языках справа налево.

Часто задаваемые вопросы

Что делает float в CSS?

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

Что делает clear?

clear переносит элемент ниже всех предыдущих float с указанной стороны: clear: left, clear: right или clear: both. Так останавливают обтекание float содержимым.

Почему у родителя плавающего элемента нулевая высота?

Float находятся вне обычного потока, поэтому у родителя, в котором только плавающие дочерние элементы, нет содержимого в потоке, и он схлопывается. Добавьте родителю display: flow-root, и он вырастет, вместив свои float.

Что такое clearfix?

Прием, чтобы родитель вмещал свои float, традиционно псевдоэлемент ::after с clear: both. Сегодня ту же задачу одной строкой решает display: flow-root у родителя.

Стоит ли использовать float для раскладки?

Нет. Float использовали для колонок до появления flexbox и grid. Для раскладки используйте flexbox или grid, а float оставьте для его исходной задачи: обтекания текстом изображения или цитаты-выноски.

Связанные концепции