Статья нуждается в примерах (пока есть только один). Они может быть будут добавлены (потом :)). Пока, если вам нужны примеры работы, - смотрите видео ниже (там же все тонкие моменты).

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

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

Синтаксис

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

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

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

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

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

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

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

Примеры

Пример

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

li {
	float: left;
}

Результат выполнения кода:

  • один
  • два
  • три
  • четыре
  • пять