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

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

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

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