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