CSS свойство float

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

Это свойство напрямую связано со свойством clear, которое определяет, должен ли элемент располагаться рядом с плавающими элементами или под ними (clear).

INFO

Свойство float будет проигнорировано, если элементы имеют абсолютное позиционирование (position: absolute).

Начальное значение	none
Применяется к	Ко всем элементам.
Наследуется	Нет.
Анимируется	Нет.
Версия	CSS1
Синтаксис DOM	object.style.cssFloat = "right";

Синтаксис

Синтаксис свойства CSS float

css

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

Пример свойства float:

Пример свойства CSS float со значением right

html

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      img {
        float: right;
        background: #ccc;
      }
    </style>
  </head>
  <body>
    <h2>Float property example</h2>
    <img src="https://ru.w3docs.com/uploads/media/default/0001/01/003e5c463668d174ab70bea245c192d81901a4a6.png" alt="W3dcos" />
    <p>
      Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
    </p>
  </body>
</html>

Try it Yourself »

Результат

CSS float Property

В следующем примере изображение смещается влево.

Пример использования свойства float для смещения изображения:

Пример свойства CSS float со значением left

html

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      img {
        float: left;
        background: #ccc;
      }
    </style>
  </head>
  <body>
    <h2>Float property example</h2>
    <img src="https://ru.w3docs.com/uploads/media/default/0001/01/003e5c463668d174ab70bea245c192d81901a4a6.png" alt="W3dcos" />
    <p>
      Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
    </p>
  </body>
</html>

Try it Yourself »

Значения

Значение	Описание	Запустить
none	Означает, что элемент не плавает и будет отображаться там, где он находится в тексте. Это значение по умолчанию для данного свойства.	Play it »
left	Означает, что элемент смещается влево.	Play it »
right	Означает, что элемент смещается вправо.	Play it »
initial	Заставляет свойство использовать значение по умолчанию.	Play it »
inherit	Наследует свойство от родительского элемента.

Практика

Какова цель свойства 'float' в CSS?

Оно используется для установки цвета фона элементаОно используется для обтекания текста изображениямиОно используется для создания совершенно новых элементов на веб-страницеОно используется для горизонтального позиционирования блочных элементов

CSS свойство float ​

Синтаксис ​

Пример свойства float: ​

Результат ​

Пример использования свойства float для смещения изображения: ​

Значения ​