Урок 20. Обзор урока: Блочная вёрстка: float, clearfix и BFC

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

⚡ Кратко

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

О чём урок

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

Структура урока

Теория

float, clear, clearfix, BFC.

Справочник

Свойства классической блочной вёрстки.

Примеры

Обтекание изображения и двухколоночный layout.

Старый vs Новый

float/clearfix против Flexbox и Grid.

Задания

Исправление старого layout.

Решения

Код и объяснения.

Ошибки

Схлопнувшийся родитель и лишний overflow.

Домашнее задание

Карточка статьи с float-изображением.

Ресурсы

Документация и исторический контекст.

Практика

  • Сделать обтекание изображения текстом.
  • Починить схлопнувшийся контейнер через clearfix.
  • Переписать старый макет на современный подход.

Навигация