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	Значение элемента наследуется от родительского элемента.