clear
Заставляет элемент начаться ниже плавающих элементов перед ним.
Синтаксис
clear: both;Значения
| Параметр | Тип | Описание |
|---|---|---|
| left | keyword | Ниже элементов с обтеканием слева. |
| right | keyword | Ниже элементов с обтеканием справа. |
| both | keyword | Ниже всех плавающих элементов. |
| none | keyword | Обтекает как обычно (по умолчанию). |
Примеры
Абзац, который не обтекает картинку:
<img src="/media/photo-200x200.jpg" alt="" width="70" style="float: left; margin-right: 8px;">
<p>Wraps around the picture.</p>
<p style="clear: both; background: lightyellow;">This paragraph starts below the picture because of clear: both.</p>Примечания
clear нужен только вместе с float. В вёрстке без плавающих элементов он ничего не делает.
См. также
- float — Прижимает элемент к левому или правому краю, чтобы текст обтекал его.
В учебнике
- Обтекание: float — Как работает float, обтекание картинки текстом, clear и display: flow-root, и почему колонки сегодня строят на flexbox и grid.