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

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

⚡ Кратко

float был создан для обтекания картинок текстом, но долго использовался для макетов. Чтобы читать старый код, нужно знать clear, clearfix и Block Formatting Context.

Справочник

СвойствоНазначениеКомментарий
float: left/rightПрижимает элемент к краю и включает обтекание.Хорошо для картинки в статье.
clear: bothЗапрещает вставать рядом с плавающими элементами.Основа clearfix.
display: flow-rootСоздаёт BFC без псевдоэлемента.Чище, чем классический clearfix.
overflow: hiddenТоже создаёт BFC.Может случайно обрезать контент.
box-sizing: border-boxУпрощает расчёт колонок.Особенно важно в старых процентных сетках.

Навигация