CSS свойство clear
Свойство clear напрямую связано с floats. Свойство clear используется для указания, должен ли элемент располагаться рядом с плавающими элементами или под ними (очищаться от обтекания).
Свойство clear можно применять как к плавающим, так и к неплавающим элементам. Это свойство принимает значения: none, left, right, both, initial и inherit. Значение none является значением по умолчанию. Оно разрешает размещение плавающих элементов с обеих сторон. Значение left запрещает размещение любых плавающих элементов слева. Значение right запрещает размещение любых плавающих элементов справа. Значение both запрещает размещение плавающих элементов как слева, так и справа.
Примечание: Свойство clear влияет только на элементы в обычном блочном потоке и не работает с макетами Flexbox или Grid.
| Начальное значение | none |
|---|---|
| Применяется к | Блочным элементам. |
| Наследуется | Нет. |
| Анимируется | Нет. |
| Версия | CSS1 |
| Синтаксис DOM | element.style.clear = "both"; |
Синтаксис
Синтаксис свойства CSS clear
clear: none | left | right | both | initial | inherit;Пример свойства clear:
Пример использования свойства CSS clear со значением left
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
img {
float: left;
background: #ccc
}
.clear {
clear: left;
}
</style>
</head>
<body>
<img src="https://ru.w3docs.com/uploads/media/default/0001/01/003e5c463668d174ab70bea245c192d81901a4a6.png" />
<p class="clear">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</p>
</body>
</html>Результат
Пример свойства clear со значением "right":
Пример использования свойства CSS clear со значением right
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
img {
float: right;
background: #ccc
}
.clear {
clear: right;
}
</style>
</head>
<body>
<img src="https://ru.w3docs.com/uploads/media/default/0001/01/003e5c463668d174ab70bea245c192d81901a4a6.png" />
<p class="clear">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
</p>
</body>
</html>Пример свойства clear со значением "both":
Пример использования свойства CSS clear со значением both
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
img {
float: right;
background: #CCC;
}
p.clear {
clear: both;
}
</style>
</head>
<body>
<img src="https://ru.w3docs.com/uploads/media/default/0001/01/003e5c463668d174ab70bea245c192d81901a4a6.png" width="220" height="80" />
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
</p>
<p class="clear">
Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
</p>
</body>
</html>Значения
| Значение | Описание |
|---|---|
| none | Разрешает размещение плавающих элементов с обеих сторон. Является значением по умолчанию для этого свойства. |
| left | Запрещает размещение плавающих элементов слева. |
| right | Запрещает размещение плавающих элементов справа. |
| both | Запрещает размещение плавающих элементов с обеих сторон. |
| initial | Устанавливает для свойства значение по умолчанию. |
| inherit | Наследует значение свойства от родительского элемента. |
Practice
Что делает свойство 'clear' в CSS?