Примеры — Урок 20

Рабочие примеры

В каждом примере сверху — живой результат, рядом — код. Смотри, как float меняет поток, и где без clearfix всё ломается.

1. Обтекание изображения текстом

Прямое назначение float: блок-картинка прижата влево, абзац огибает её справа.

IMG

float: left прижимает картинку к левому краю, и весь этот текст обтекает её справа. Строки переносятся вокруг блока, как печатный текст огибает фотографию в газетной колонке.

📄 lesson-20/article.css

.article__image {
  float: left;
  width: 110px;
  margin: 0 1rem 0.5rem 0;
}

2. float: right — обтекание с другой стороны

То же самое, но врезка уходит вправо, а текст обтекает её слева.

Врезка с цитатой или подсказкой

float: right отправляет врезку к правому краю. Основной текст занимает оставшееся место слева и аккуратно огибает блок. Так часто оформляют боковые заметки в статьях.

📄 lesson-20/aside.css

.aside-note {
  float: right;
  width: 120px;
  margin: 0 0 0.5rem 1rem;
}

3. Родитель схлопывается БЕЗ clearfix

Дефект: внутри только float-дети, поэтому родитель (жёлтая рамка) теряет высоту и сжимается в полоску.

Жёлтая рамка должна была охватить блоки A и B, но она схлопнулась — фон ушёл наверх.

📄 lesson-20/broken.css

.parent {
  border: 2px dashed #b45309;
  /* нет clearfix → высота = 0 */
}
.child { float: left; }

4. Тот же блок С clearfix (display: flow-root)

Одна строка display: flow-root создаёт BFC — родитель снова учитывает высоту float.

Теперь зелёная рамка корректно охватывает оба плавающих блока.

📄 lesson-20/fixed.css

.parent {
  border: 2px dashed #15803d;
  display: flow-root;   /* BFC: учитывает float */
}
.child { float: left; }

5. Две колонки на float (исторический layout)

Так раньше собирали страницы: сайдбар влево, контент вправо, clearfix у родителя.

.sidebar
30%

.content
68%

📄 lesson-20/old-layout.css

.layout::after {
  content: "";
  display: table;
  clear: both;          /* clearfix */
}
.sidebar { float: left;  width: 30%; }
.content { float: right; width: 68%; }

Такой layout работает, но он хрупкий: нужно вручную следить за суммой ширин (30% + 68% + зазор), помнить про clearfix и box-sizing. В современном коде это решают Grid/Flexbox (см. «Старый vs Новый»).

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