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

Плавающие элементы вырываются из нормального потока документа и сдвигаются влево или вправо. Другие элементы обтекают их.

Особенности:

• Сдвиг: Элемент с float: left; сдвигается влево, все следующие элементы обтекают его справа. Элемент с float: right; сдвигается вправо, остальные элементы обтекают его слева.
• Высота контейнера: Изначально родительский контейнер не учитывает высоту плавающих потомков, что может приводить к "схлопыванию".
• Ширина: Плавающий элемент становится блочным и его ширина определяется его содержимым, если явно не задана.
• margin: Можно использовать margin для создания отступов вокруг плавающего элемента.
• clear: Свойство clear предотвращает обтекание. clear: left; запрещает обтекание элемента слева, clear: right; справа, clear: both; с обеих сторон. Typically applied to an element after the floated elements.

Пример использования float и clear:

html

css

Методы очистки обтекания (кроме clear):

• Overflow: Добавление overflow: hidden; или overflow: auto / scroll; родительскому элементу заставляет его учитывать высоту плавающих потомков.
• Псевдоэлемент ::after: Более современный и гибкий метод.

css