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

Float в CSS — это свойство, которое позволяет элементу «плавать» влево или вправо от содержимого, которое обтекает его.

Основные характеристики:

• Смещение: Элемент с applied float свойством сдвигается к левому или правому краю своего родительского контейнера (или другого float-элемента).
• Обтекание: Обычное блочное или строчное содержимое (текст, изображения) обтекает плавающий элемент.
• Потоковый контекст: Плавающие элементы частично выводятся из нормального потока документа, но они влияют на позиционирование других элементов.
• Применение: Изначально использовались для организации колонок или размещения изображений с текстом вокруг них. В современной верстке чаще применяются Flexbox или Grid.

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

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

Проблемы с float:

• Схлопывание родителя: Родительский контейнер, содержащий только плавающие элементы, может схлопнуться по высоте.
• Очистка: Для предотвращения обтекания последующими элементами требуется использовать свойство clear.

.image-float {
  float: left; /* Изображение будет плавать слева */
  margin-right: 10px; /* Отступ справа от изображения */
}

.text-content {
  /* Этот текст будет обтекать изображение */
}

.clearfix::after {
  content: "";
  display: table;
  clear: both; /* Очистка обтекания после плавающих элементов */
}