Свойство float позволяет сделать элемент плавающим, смещая его к левому или правому краю родительского элемента, в зависимости от того, какое значение установлено. Если для плавающего элемента явно не установлена ширина (), то он сжимается по ширине до размеров содержимого.
Браузер обрабатывает код HTML-документа двигаясь сверху вниз, когда обработка кода доходит до плавающего элемента, браузер размещает его сначала согласно потоку документа, т.е. под тем элементом где он расположен в коде документа, затем он удаляет плавающий элемент из потока документа и смещает его на максимально возможное расстояние к левому или правому краю родительского элемента.
Поскольку плавающий элемент был удалён из потока документа остальные блочные элементы, расположенные в коде после него, смещаются на его место, будто этого элемента там и не было.
Несмотря на то, что плавающий элемент был удалён из потока документа, на поток содержимого, тем не менее он влияет, рассмотрим, что это значит. В отличие от блочных элементов, строчное содержимое (текст, изображения и др. строчные элементы) расположенное в коде после плавающего элемента, учитывает его границы и обтекает его.
В одном ряду можно размещать более одного плавающего элемента, если это позволяет ширина родительского элемента. Если ширины родительского элемента не хватает, то плавающие элементы, которые не помещаются в ряду будут смещены вниз.
Плавающие элементы по умолчанию не влияют на высоту родительского элемента, то есть, если у вас есть некоторый контейнер, а в нём находятся только плавающие элементы, то высота контейнера будет равна нулю. Решить данную проблему можно следующими способами:
- Задать фиксированную высоту - в тех случаях, когда известно какая должна быть высота контейнера (это самое простое решение).
- Применить свойство : auto (или hidden) к контейнеру - это заставляет контейнер заново рассчитать высоту и изменить её так, чтобы плавающие элементы учитывались. Этот способ можно использовать когда заранее не известно какая должна быть высота контейнера.
Примечание: элементы с абсолютным и фиксированным позиционированием игнорируют свойство float.
| Значение по умолчанию: |
none |
| Наследуется: |
нет |
| Версия: |
CSS1 |
| Синтаксис JavaScript: |
object.style.cssFloat="left" |
| Значение |
Описание |
| left |
Элемент плавает слева. |
| right |
Элемент плавает справа. |
| none |
Элемент не является плавающим и будет отображаться точно там, где он расположен. |
| inherit |
Указывает, что значение наследуется от родительского элемента. |
Пример