Свойство 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>float: left
float: right
clear
Читайте также
Свойство background
Универсальное свойство позволяет установить одновременно несколько характеристик фона. Значения м...
Стиль посещенных ссылок
Псевдокласс :visited применяется к ссылкам, уже посещённым пользователем, и задаёт для них стилев...
Свойство margin
Устанавливает величину отступа от границы текущего элемента до внутренней границы его родительско...
Свойство list-style-position
Указывает, как будет размещаться маркер относительно текста — маркер обтекается текстом или вынес...
Свойство transition
Универсальное свойство, которое позволяет одновременно задать значения transition-property, trans...