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

float убирает элемент из обычного потока документа, позволяя другим элементам (обычно текстовым или строчным) обтекать jego со стороны, указанной в свойстве (left, right).

Основные принципы:

• Удаление из потока: Элемент с float не занимает места в обычном течении документа.
• Обтекание: Соседние блочные элементы не будут занимать место элемента с float, а их содержимое (строчные элементы) будет обтекать его с указанной стороны.
• Влияние на родителя: Высота родительского контейнера, содержащего только плавающие элементы, может схлопнуться, игнорируя их высоту.
• clear: Свойство clear (left, right, both) используется для предотвращения обтекания элементами, расположенными после плавающего элемента.

Пример:

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

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

Рекомендации:

• Использование float в основном устарело для создания сложных макетов и заменено Flexbox или Grid.
• float все еще может быть полезен для создания эффекта обтекания изображений текстом.
• Для предотвращения схлопывания родителя при использовании float применяют техники "clearfix" или overflow: hidden/auto к родителю.