Урок 20. Теория: Блочная вёрстка: float, clearfix и BFC

📁 Раздел: Блочная модель и позиционирование ⏱️ Время изучения: ~55 мин 🎯 Сложность: Средняя
#float #clear #display #overflow #box-sizing

⚡ Кратко

float: left/right прижимает блок к краю и выводит его из обычного потока — соседний текст начинает его обтекать. Это родное назначение float: картинка в статье.

  • clear: both запрещает элементу вставать рядом с float — следующий блок уходит ниже.
  • Плавающие дети не увеличивают высоту родителя → родитель схлопывается, фон исчезает.
  • Лечение: clearfix (псевдоэлемент с clear) или современное display: flow-root — оба создают BFC.
  • Для раскладки страницы float устарел — берите Flexbox/Grid. Для обтекания текстом float остаётся валидным.

Главная идея

Свойство float «прижимает» элемент к левому или правому краю контейнера и выводит его из обычного потока — но не полностью: соседний текст и inline-контент начинают обтекать плавающий блок. Именно для этого float и был придуман — чтобы картинка внутри статьи стояла сбоку, а абзац аккуратно её огибал. Позже, когда у CSS ещё не было Flexbox и Grid, этим же приёмом стали собирать целые макеты страниц — и вместе с ним пришли clearfix и BFC как «костыли», без которых float-вёрстка ломалась.

Float — как фотография в газетной колонке. Редактор ставит снимок в угол статьи, и текст сам обтекает его со свободной стороны: строки переносятся вокруг картинки, а не наезжают на неё. Уберёшь фото — текст снова займёт всю ширину колонки. Точно так же float: left прижимает блок к краю, а абзацы «огибают» его, как печатный текст огибает иллюстрацию.

Как float вынимает элемент из потока

Плавающий элемент перестаёт занимать «строку целиком»: он сжимается до своей ширины и уходит к краю, а место под ним заполняет следующий контент. На схеме — что происходит с блоком при float: left:

До float — блок занимает всю строку IMG (block) После float: left — текст обтекает справа IMG
float убирает блок из строки: текст огибает его сбоку, а под ним продолжается на всю ширину.

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

Свойство clear запрещает элементу вставать рядом с плавающими соседями: clear: left уводит его ниже левых float, clear: right — ниже правых, а clear: both — ниже любых. Это нужно, когда следующий блок (например, подвал статьи) не должен «залезать» в зону обтекания.

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

Главная боль float-вёрстки: плавающие дети не увеличивают высоту родителя. Для браузера float как бы «не считается» при расчёте высоты контейнера — и если внутри только float-элементы, родитель схлопывается в полоску высотой 0, а его фон и рамка исчезают. Классическое лечение — clearfix: добавить псевдоэлемент с clear: both в самый конец родителя, чтобы он «дотянул» высоту до низа float.

📄 lesson-20/clearfix.css
/* Старый, но до сих пор встречающийся приём */
.clearfix::after {
  content: "";
  display: table;
  clear: both;
}

Block Formatting Context (BFC)

BFC — это «независимая область» вёрстки, внутри которой блоки и float-ы живут по своим правилам и не влияют на внешний мир. Ключевое свойство BFC для нас: контейнер, образующий BFC, учитывает высоту своих float-детей — и больше не схлопывается. BFC создаётся, например, через overflow: auto/hidden, display: flow-root или у самих float-элементов.

Современный вариант: вместо хака с псевдоэлементом сегодня достаточно одной строки — display: flow-root. Она создаёт BFC «начисто», без побочных эффектов overflow: hidden.

Когда применять float сегодня

Для обтекания текстом (картинка, врезка, буквица) float остаётся правильным инструментом — это его прямое назначение. А вот для раскладки страницы (колонки, сетки, шапка-контент-подвал) float устарел: его заменили Flexbox и Grid. Знать float всё равно полезно — чтобы читать и поддерживать старый код.

Частая ошибка: ставить float всем блокам ради колонок. Получится хрупкая сетка, где надо вручную следить за суммой ширин и не забывать clearfix. Для макета берите Grid/Flexbox.

Навигация