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

Читайте также