float

Поддержка браузерами


12.0+	4.0+	1.0+	1.0+	7.0+	1.0+

Описание

CSS свойство float позволяет сделать элемент плавающим, смещая его к левому или правому краю родительского элемента, в зависимости от того, какое значение установлено. Если для плавающего элемента явно не установлена ширина (width), то он сжимается по ширине до размеров содержимого.

Браузер обрабатывает код HTML документа двигаясь сверху вниз, когда обработка кода доходит до плавающего элемента, браузер размещает его сначала согласно потоку документа, т.е. под тем элементом где он расположен в коде документа, затем он удаляет плавающий элемент из нормального потока и смещает его на максимально возможное расстояние к левому или правому краю родительского элемента:

css float right

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

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

обтекание текстом css

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

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Название документа</title>
    <style>
	  p { width: 250px; }
      img { float: left; }
    </style>
  </head>
  <body>
    <p>
    <img src="css.png" width="120" height="120">
    С помощью CSS свойства float картинка была сделана плавающей с левой стороны. 
    Текст, расположенный в HTML коде ниже картинки, будет обтекать картинку
    по правой и нижней стороне.</p>
  </body>
</html>

Попробовать »

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

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

Задать фиксированную высоту - в тех случаях, когда известно какая должна быть высота контейнера.
Применить свойство overflow со значением auto или hidden к контейнеру, тогда плавающие элементы будут учитываться при вычислении высоты контейнера. Этот способ можно использовать когда заранее не известно какая должна быть высота контейнера.

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

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

Значение по умолчанию:	none
Применяется:	ко всем элементам, кроме тех, которые имеют абсолютное или фиксированное позиционирование
Анимируется:	нет
Наследуется:	нет
Версия:	CSS1
Синтаксис JavaScript:	object.style.cssFloat="left"

Синтаксис

float: none|left|right|inherit;

Значения свойства

Значение	Описание
left	Элемент плавает слева.
right	Элемент плавает справа.
none	Элемент не является плавающим и будет отображаться точно там, где он расположен.
inherit	Указывает, что значение наследуется от родительского элемента.

Пример

CSS Свойство:

float:

Результат:

Элемент, значение которого вы меняете.

Измените значение. Обратите внимание на результат расположения элементов.

CSS Код:

div#myDIV {
width: 100px;
background-color: red;
float: none;
}

Кликните на любое значение свойства, чтобы увидеть результат