Как работают плавающие элементы (float)?

Краткий ответ

• float выравнивает элемент к левому/правому краю, а соседний текст и inline‑контент его обтекают.
• Поток меняется: контейнер может «схлопнуться», так как float исключается из нормального потока.
• Управляйте обтеканием через clear, а высотой контейнера — через overflow:auto, display: flow-root или clearfix.

Полный ответ

Что делает float

• Значения: left, right, none.
• Элемент «прилипает» к краю, а содержимое вокруг обтекает.

Мини‑пример:

.img { float: left; margin: 0 8px 8px 0; }

Обтекание и clear

• clear: left|right|both — запрещает обтекание со соответствующих сторон.

Мини‑пример:

.block { clear: both; }

Контейнер и схлопывание

• Родитель без внутреннего контента может не учитывать высоту float.

Способы исправить:

.container { overflow: auto; }
/* или */
.container { display: flow-root; }

clearfix (через псевдоэлемент)

Классический способ «замкнуть» поток:

.container::after {
  content: "";
  display: block;
  clear: both;
}

Частые ошибки

• Забывать про clear — контент налезает на float.
• Полагаться на float для сложных сеток — лучше использовать Flexbox или Grid.
• Жёсткие размеры без учёта обтекания — ломается адаптивность.

Современные альтернативы

• Для компоновки: display: flex и display: grid.
• float оставляйте для локальных задач (обтекание изображений и похожих кейсов).