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

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

⚡ Кратко

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

Старый подход: float/clearfix для layout

Раньше двухколоночные страницы собирали через float и clearfix. Работает, но требует ручного контроля: сумма ширин, clearfix, box-sizing.

.sidebar
float: left · 28%
.content
float: right · 70%
📄 lesson-20/old-float-layout.css
.page::after {        /* clearfix */
  content: "";
  display: table;
  clear: both;
}
.page__sidebar { float: left;  width: 28%; }
.page__content { float: right; width: 70%; }

Новый подход: Flexbox или Grid

Современный layout описывает отношения колонок напрямую: задаёшь шаблон и зазор — никакого clearfix, никакого подсчёта процентов.

.sidebar
280px
.content
minmax(0, 1fr)
📄 lesson-20/new-layout.css
.page {
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr);
  gap: 2rem;
}
@media (max-width: 760px) {
  .page { grid-template-columns: 1fr; }
}

А вот это float делает до сих пор правильно

Обтекание текстом картинки — родное назначение float, и Flexbox/Grid его не заменяют. Этот приём остаётся валидным и современным.

IMG

float: left для картинки внутри абзаца — корректный современный код. Здесь текст обязан обтекать блок, и ни Flexbox, ни Grid этого «огибания строк» не дают.

📄 lesson-20/figure.css
.article__image {
  float: left;          /* ОК и сегодня: обтекание текстом */
  margin: 0 1rem 0.4rem 0;
}
Вывод: float для раскладки страницы устарел — новые макеты строят на Flexbox/Grid. Но float для обтекания текстом остаётся правильным инструментом. Знать float нужно и для поддержки старого кода.

Навигация