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