Float и clear

float выталкивает элемент из нормального потока и прижимает его к левому или правому краю, позволяя тексту обтекать его. clear запрещает обтекание. В современном CSS float почти полностью заменён Flexbox/Grid, но знать его нужно для поддержки legacy-кода.

Зачем нужно

Float исторически был единственным способом создавать многоколоночные раскладки. Сегодня он остаётся полезным для обтекания изображений текстом — изначальной задачи float. Понимание float необходимо для работы с существующим кодом.

Где используется

  • Обтекание изображений текстом (основное современное применение)
  • Legacy-раскладки (старые проекты)
  • Буквицы (drop caps)

Предпосылки

float

/* Прижать влево, текст обтекает справа */
.float-left {
  float: left;
}

/* Прижать вправо, текст обтекает слева */
.float-right {
  float: right;
}

/* Отменить float */
.no-float {
  float: none;
}

Обтекание изображения

.article img {
  float: left;
  margin: 0 16px 16px 0;
  max-width: 300px;
}

<article class="article">
  <img src="photo.jpg" alt="Описание">
  <p>Текст статьи, который обтекает изображение слева.
     Следующие строки продолжают обтекание...</p>
</article>

clear

Запрещает обтекание для элемента:

.clear()-left  { clear: left; }   /* Не обтекать float-left */
.clear()-right { clear: right; }  /* Не обтекать float-right */
.clear()-both  { clear: both; }   /* Не обтекать ни один float */

Проблема: контейнер «схлопывается»

Float-элементы не влияют на высоту родителя:

/* Родитель высотой 0, хотя внутри float-картинка */
.container {
  border: 2px solid red;
}
.container img {
  float: left;
}
/* border обнимает пустоту */

Решение 1: Clearfix (legacy)

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

Решение 2: overflow (legacy)

.container {
  overflow: hidden; /* или auto */
}

Решение 3: display: flow-root (современный)

.container {
  display: flow-root; /* Создаёт BFC, содержит float-потомков */
}

display: flow-root — лучшее современное решение. Без побочных эффектов overflow: hidden.

Когда использовать в современном CSS

Обтекание текстом — ДА

.article .figure {
  float: right;
  margin: 0 0 1em 1em;
  max-width: 40%;
}

Буквица (Drop Cap)

.article p:first-of-type::first-letter {
  float: left;
  font-size: 3.5em;
  line-height: 0.8;
  margin: 0 8px 4px 0;
  font-weight: bold;
  color: #2c3e50;
}

Раскладка — НЕТ (используйте Flexbox/Grid)

/* УСТАРЕЛО */
.col { float: left; width: 33.33%; }
.clearfix::after { content: ""; display: block; clear: both; }

/* СОВРЕМЕННО */
.row { display: flex; gap: 16px; }
.col { flex: 1; }

/* Или Grid */
.row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }

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

.circle-image {
  float: left;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  margin: 0 20px 10px 0;
  shape-outside: circle(50%); /* Текст обтекает по кругу */
}

/* Обтекание по форме изображения */
.shaped {
  float: left;
  shape-outside: url("shape.png"); /* По прозрачности PNG */
  shape-margin: 10px;
}

/* Произвольный полигон */
.polygon {
  float: left;
  shape-outside: polygon(0 0, 100% 0, 100% 100%);
}

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

  1. Использование float для раскладки — вместо Flexbox/Grid. Float для раскладки — legacy

  2. Забыт clearfix — родитель схлопывается:

    /* Решение */
.parent { display: flow-root; }

  3. Float ломает inline-элементы — float-элемент становится блочным (display вычисляется как block)

  4. Clear на float-элементе — clear работает на НЕ-float-элементе, который должен быть ниже float

Практика

  • Обтечь изображение текстом с помощью float: left
  • Воспроизвести проблему «схлопнувшегося» контейнера и решить через flow-root
  • Создать буквицу (drop cap) через float
  • Попробовать shape-outside: circle для обтекания по кругу

Связанные темы

Ресурсы