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

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

⚡ Кратко

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

Задания

  1. Сверстайте блок статьи: изображение слева, текст обтекает его справа.
  2. Сделайте контейнер с двумя float-колонками и исправьте схлопывание родителя через clearfix.
  3. Замените clearfix на display: flow-root и сравните результат.
  4. Перепишите тот же layout через Grid или Flexbox и объясните, почему он устойчивее.

Ожидаемый результат

Для задания 1 — картинка прижата влево, текст огибает её справа. Для задания 2 — две колонки в одной строке внутри видимой рамки родителя.

Задание 1: обтекание IMG Задание 2: две колонки в рамке родителя sidebar content
Эскиз ожидаемого результата заданий 1 и 2.
Готовые разборы с живыми демо — на странице «Решения».

Навигация