Свойство 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;
}