Плавающие элементы (floats) в CSS вырываются из обычного потока документа и смещаются в указанном направлении (влево или вправо) внутри своего содержащего блока. Соседние строчные элементы и содержимое начинают обтекать плавающий элемент с противоположной стороны.

Основные свойства float:

left: Элемент смещается влево.
right: Элемент смещается вправо.
none: Элемент остается в обычном потоке (значение по умолчанию).
inherit: Наследует значение от родителя.

Они часто использовались для создания многоколоночных макетов до появления Flexbox и Grid.

Особенности поведения:

Плавающий элемент становится блочным, независимо от исходного типа отображения.
Высота родительского контейнера не учитывает высоту плавающего элемента, что может привести к "схлопыванию" контейнера. Для решения этой проблемы используются методы очистки (clearing).

Методы очистки (clearing):

clear свойство: Применяется к элементу, чтобы предотвратить его обтекание плавающими элементами. Значения: left, right, both, none, inherit.
```
css
```
Обнуление потока (clearfix хак): Добавление псевдоэлемента :after к родительскому контейнеру с применением clear: both и других стилей для предотвращения схлопывания.
```
css
```

Несмотря на появление более современных методов макетирования, float все еще может быть полезен для небольших элементов, например, для размещения изображения внутри текста.

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