Свойство clear
Описание
Указывает, с какой стороны элемента запрещено его обтекание другими элементами. Если задано обтекание элемента с помощью свойства float, то clear отменяет его действие для указанных сторон.
Синтаксис
clear: none | left | right | both;Подробности
| Значение | Описание |
| none | Отменяет действие clear, при этом обтекание элемента происходит, как задано с помощью свойства float или других настроек. |
| both | Отменяет действие float с правого и левого краёв. Рекомендуется применять, когда требуется отменить обтекание элемента, но неизвестно точно с какой стороны. |
| left | Отменяет действие float со значением left. |
| right | Отменяет действие float со значением right. |
Пример
<!DOCTYPE html>
<html lang='ru'>
<head>
<meta charset='UTF-8'>
<meta name='viewport' content='width=device-width, initial-scale=1.0'>
<title>Document</title>
</head>
<body>
<style>
#left2 {
width: 90px;
padding: 10px 5px;
background: rgba(15, 139, 180, 0.556);
float: left;
}
#right2 {
width: 90px;
padding: 20px 5px;
background: rgba(179, 236, 21, 0.326);
float: right;
}
#clear-test2 {
padding: 15px 5px;
background: rgba(213, 61, 1, 0.468);
clear: right;
}
</style>
<div id='left2'>float: left</div>
<div id='right2'>float: right</div>
<div id='clear-test2'>clear</div>
</body>
</html>Читайте также
Свойство grid-gap
Определяет отступ между строками и столбцами grid сетки.
Сокращение для grid-row-gap и grid-column-gap....
Свойство perspective-origin
Задаёт координаты точки, куда смотрит наблюдатель. Это свойство работает совместно со свойством perspective и определяет точку сходимости линий при пе...
Свойство text-decoration-style
Устанавливает стиль декоративной линии, которая добавляется к тексту через свойство text-decoration или text-decoration-line....
Свойство perspective
Определяет расстояние от плоскости экрана до точки сходимости линий и тем самым задаёт, насколько выражен эффект перспективы. Точка сходимости по умол...