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

CSS Floats — это свойство позиционирования, которое перемещает элемент к одной из сторон его контейнера (left или right), позволяя тексту и инлайновым элементам обтекать его. Элемент удаляется из обычного потока документа, но остается частью макета. Изначально использовались для создания многоколоночных макетов и обтекания изображений текстом, но сейчас в основном применяются для решения специфических задач из-за более гибких и предсказуемых методов, таких как Flexbox и Grid.

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

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

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

.image {
  float: left;
  margin-right: 15px; /* Отступ справа от обтекающего текста */
}

.text {
  /* Текст будет обтекать элемент с классом .image */
}

Проблемы с floats:

• Выпадение из потока (collapsing surrounding element): Родительский элемент, содержащий только флоатящиеся элементы, может схлопнуться по высоте, поскольку эти элементы не учитываются в его обычных размерах.
• Перекрытие элементов: Соседние элементы могут перекрывать флоатящийся элемент, если их размеры не учтены.

Решение проблем:

• Свойство clear: Устанавливается для элемента, который не должен обтекать флоатящийся элемент. Значения: left, right, both, none.
• Техника clearfix: Добавление специального класса к родительскому элементу или использование псевдоэлемента :after для принудительного схлопывания родителя.

.container::after {
  content: "";
  display: table; /* Или block */
  clear: both;
}

• Современные методы: Использование Flexbox или CSS Grid для создания сложных раскладок.

Хотя floats не являются основным инструментом для макетирования в современном вебе, понимание их работы важно для поддержки старого кода и решения специфических задач, например, обтекания изображений текстом.