CSS свойство float

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

Свойство float игнорируется, если элементы абсолютно позиционированы (position: absolute).
Значение по умолчанию none
Применяется Ко всем элементам.
Наследуется Нет
Анимируемое Нет
Версия CSS1
DOM синтаксис object.style.cssFloat = "right";

Синтаксис

float: none | left | right | initial | inherit;

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
    <style>
      img {
      float: right;
      background: #ccc;
      }
    </style>
  </head>
  <body>
    <h2>Пример свойства float</h2>
    <img src="/uploads/media/default/0001/01/003e5c463668d174ab70bea245c192d81901a4a6.png" alt="W3dcos">
    <p>Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне. Lorem Ipsum является стандартной "рыбой" для текстов на латинице с начала XVI века. В то время некий безымянный печатник создал большую коллекцию размеров и форм шрифтов, используя Lorem Ipsum для распечатки образцов. Lorem Ipsum не только успешно пережил без заметных изменений пять веков, но и перешагнул в электронный дизайн.</p>
  </body>
</html>

Пример, где изображение находится в левой стороне, а текст обтекает его по правой стороне:

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
    <style>
      img {
      float: left;
      background: #ccc;
      }
    </style>
  </head>
  <body>
    <h2>Пример свойства float</h2>
    <img src="/uploads/media/default/0001/01/003e5c463668d174ab70bea245c192d81901a4a6.png" alt="W3dcos">
    <p>Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне. Lorem Ipsum является стандартной "рыбой" для текстов на латинице с начала XVI века. В то время некий безымянный печатник создал большую коллекцию размеров и форм шрифтов, используя Lorem Ipsum для распечатки образцов. Lorem Ipsum не только успешно пережил без заметных изменений пять веков, но и перешагнул в электронный дизайн.</p>
  </body>
</html>

Значения

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

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

chrome edge firefox safari opera
1.0+ 12.0+ 1.0+ 1.0+ 7.0+

Практикуйте свои знания

Каковы возможные значения для свойства CSS 'float'?
Считаете ли это полезным?