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

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

⚡ Кратко

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

Решение 1–3: обтекание + clearfix через flow-root

Картинка плавает влево и обтекается текстом, а родитель .article не схлопывается благодаря display: flow-root (современный clearfix).

IMG

Рамка родителя охватывает и картинку, и текст: flow-root создал BFC, поэтому высота float учтена. Текст обтекает изображение справа.

📄 lesson-20/solution-float.css
.article {
  display: flow-root;        /* BFC вместо clearfix-хака */
}
.article__image {
  float: left;
  width: min(220px, 40%);
  margin: 0 1rem 1rem 0;
}

Решение 4: тот же макет на Grid

Для структуры страницы float заменяем на Grid: устойчиво, без clearfix и подсчёта процентов.

.sidebar
.content — занимает остаток ширины через minmax(0, 1fr)
📄 lesson-20/solution-grid.css
.layout {
  display: grid;
  grid-template-columns: 18rem minmax(0, 1fr);
  gap: 2rem;
}

Первое решение уместно для обтекания текста вокруг картинки. Второе — для структуры страницы: Grid устойчивее, потому что описывает колонки декларативно и сам считает ширины.

Навигация