Свойство float

---

---

Что такое float?

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

---

Как действует свойство float

Свойство float перемещает элемент только по горизонтали.

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

Элемент, следующий за смещаемым элементом обтекает его.

Если изображение смещается вправо, следующий за ним текст обтекает его слева:

---

Несколько смещаемых элементов друг за другом

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

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

---

Запрет обтекания элемента — свойство clear

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

Свойство clear указывает на то, с какой стороны запрещено обтекать элемент.

---

Примеры

Выравнивание изображения в параграфе по правому краю

Выравнивание изображения с подписью по правому краю

Буквица

Создание горизонтального меню

Разметка сайта на элементах div (без таблиц)

---

Float — справка CSS

Число в столбце "CSS" указывает на то, в какой версии CSS появилось соответствующее свойство (CSS1 или CSS2).

Свойство	Описание	Значения	CSS
clear	Определяет ту сторону элемента, с которой его запрещено обтекать	left right both none inherit	1
float	Указывает в какую сторону должен быть перемещен элемент	left right none inherit	1

---

---