Что такое плавающие элементы (float) в CSS?

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

Основные значения свойства float:

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

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

.float-left {
  float: left; /* Элемент будет плавать слева */
  margin-right: 10px; /* Добавляем отступ справа для текста */
}

.float-right {
  float: right; /* Элемент будет плавать справа */
  margin-left: 10px; /* Добавляем отступ слева для текста */
}

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

• Плавающий элемент удаляется из стандартного потока документа, но при этом воздействует на расположение соседних элементов и текста.
• Родитель плавающего элемента может "схлопнуться", так как плавающие дети не влияют на его высоту в обычном потоке. Для предотвращения этого используют метод clear или другие техники, например, overflow: hidden или Flexbox/Grid.
• Свойство clear позволяет указать, с какой стороны плавающие элементы не должны находиться:

  .clear-left {
    clear: left; /* Элемент будет расположен ниже любого элемента, плавающего слева */
  }
  
  .clear-right {
    clear: right; /* Элемент будет расположен ниже любого элемента, плавающего справа */
  }
  
  .clear-both {
    clear: both; /* Элемент будет расположен ниже любого плавающего элемента */
  }
  

Плавающие элементы исторически использовались для создания многоколоночных макетов, но сейчас для этой цели предпочтительнее использовать Flexbox или CSS Grid из-за их лучшей гибкости и предсказуемости. Однако float по-прежнему полезен для обтекания текста изображениями или другими элементами.