Типичные ошибки
Ошибка 1. float для всей сетки нового проекта
Как ломается: вёрстка всей страницы на float
усложняет адаптивность и порядок элементов — приходится вручную считать проценты,
следить за clearfix и переставлять блоки в HTML.
Правильно: для раскладки берите Grid/Flexbox, float оставьте для обтекания текстом.
Ошибка 2. Забыть clearfix — родитель схлопывается
Как ломается: внутри только float-дети, и фон/рамка
родителя исчезают, потому что его высота стала 0. Слева — дефект, справа — исправление.
❌ Без clearfix — рамка схлопнулась:
A
B
✅ С display: flow-root — рамка охватывает детей:
A
B
📄 lesson-20/fix.css
/* ❌ ничего → высота 0 */
.parent { border: 2px solid #b91c1c; }
/* ✅ создаём BFC */
.parent { display: flow-root; }
.child { float: left; }Ошибка 3. Лечить всё через overflow: hidden
Как ломается:
overflow: hidden создаёт
BFC и убирает схлопывание, но заодно обрезает выпадающие меню, тултипы и тени, которые
должны выходить за границы блока. Предпочитайте display: flow-root.Диагностика: если родитель «не видит» высоту детей —
ищите внутри
float и проверяйте, образует ли контейнер BFC.