Float в CSS — это свойство, которое позволяет элементу «плавать» влево или вправо от содержимого, которое обтекает его.
Основные характеристики:
- Смещение: Элемент с applied float свойством сдвигается к левому или правому краю своего родительского контейнера (или другого float-элемента).
- Обтекание: Обычное блочное или строчное содержимое (текст, изображения) обтекает плавающий элемент.
- Потоковый контекст: Плавающие элементы частично выводятся из нормального потока документа, но они влияют на позиционирование других элементов.
- Применение: Изначально использовались для организации колонок или размещения изображений с текстом вокруг них. В современной верстке чаще применяются Flexbox или Grid.
Типичные значения свойства float:
left: Элемент плавает влево.right: Элемент плавает вправо.none: Элемент не плавает (значение по умолчанию).inherit: Наследует значение родителя.initial: Устанавливает значение по умолчанию.
Проблемы с float:
- Схлопывание родителя: Родительский контейнер, содержащий только плавающие элементы, может схлопнуться по высоте.
- Очистка: Для предотвращения обтекания последующими элементами требуется использовать свойство
clear.
css