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

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

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

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

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

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

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

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

• clear свойство: Применяется к элементу, чтобы предотвратить его обтекание плавающими элементами. Значения: left, right, both, none, inherit.

  /* Элемент не будет обтекать плавающие элементы с обеих сторон */
  .clear-both {
    clear: both;
  }
  

• Обнуление потока (clearfix хак): Добавление псевдоэлемента :after к родительскому контейнеру с применением clear: both и других стилей для предотвращения схлопывания.

  /* Классический clearfix */
  .clearfix::after {
    content: "";
    display: table; /* или "block" */
    clear: both;
  }
  

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