Свойство float

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

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

Синтаксис

селектор { float: left | right | none; }
селектор { clear: both | left | right | none; }

Значения для float

Значение Описание
left Блок будет плавать слева, а текст будет обтекать его справа.
right Блок будет плавать справа, а текст будет обтекать его слева.
none Обтекания нет.

Значение по умолчанию: none.

Значения для clear

Значение Описание
left Отменяет обтекание слева.
right Отменяет обтекание справа.
both Отменяет обтекание и слева, и справа.
none Отмены обтекания нет.

Значение по умолчанию: none.

Пример

Используем float нестандартным образом, поставив пункты списка в линию:

<ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> </ul> li { float: left; border: 1px solid red; }

: