Свойство float - это настоящий маст-хэв для создания гибких и динамичных макетов. Оно позволяет «освободить» элемент из обычного потока документа, заставляя его плавать у левого или правого края родительского блока в зависимости от установленного значения. Обратите внимание на тонкость: если вы не зададите ширину явно (width), то элемент интуитивно сожмется до размеров своего содержимого.

Как именно это работает? Браузер читает код сверху вниз и сначала размещает элемент по стандартному потоку. Но тут же происходит магия: браузер вытаскивает элемент из общего ряда и смещает его максимально близко к нужной стороне (левой или правой) родителя.

Здесь кроется важный нюанс, который часто ставит новичков в тупик. Поскольку плавающий элемент «выпадает» из потока, все последующие блочные элементы ведут себя так, будто этого элемента там просто нет, и смещаются на его место.

Однако! Несмотря на удаление из потока, float всё равно влияет на окружающую среду. В отличие от блоков, строчное содержимое (текст, картинки) умно обтекает границы плавающего элемента, а не пересекает их.

Вы можете разместить несколько плавающих элементов в один ряд, если ширина родителя это позволяет. Если же места не хватает - лишние элементы просто «сползут» вниз, создавая новую строку. Это логично и предсказуемо.

Самая частая боль при работе с float - высота родительского контейнера. По умолчанию плавающие элементы не влияют на высоту родителя, поэтому если внутри только они, высота будет равна нулю, что выглядит как баг. Решить эту проблему можно двумя способами:

1. Задать фиксированную высоту (самое простое решение, когда размер заранее известен).
2. Применить свойство overflow: auto (или hidden) к контейнеру. Это заставляет браузер заново пересчитать высоту с учетом «плавающих» детей - отличный вариант, когда точный размер неизвестен.

Примечание: Помните, что элементы с абсолютным и фиксированным позиционированием полностью игнорируют свойство float.