Очищення (clear) у CSS: Визначення, Синтаксис та Значення
Очищення (clear) - це властивість у CSS, яка вказує, з якої сторони елемента не можуть обтікати інші елементи. Якщо елемент вже має обтікання за допомогою властивості float, то властивість clear скасовує це обтікання для вказаних сторін.
Синтаксис
clear: none | left | right | both | inherit
Значення
- none
- Скасовує обтікання, як вказано за допомогою властивості clear або інших налаштувань.
- both
- Скасовує обтікання елемента одночасно з правого і лівого краю.
- left
- Скасовує обтікання зліва, змушуючи інші елементи на цій стороні опуститися вниз.
- right
- Скасовує обтікання справа.
- inherit
- Установлює значення батька.
Приклад
Приклад підтримки
HTML5CSS2.1IECrOpSaFx
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>clear</title>
<style>
#layer {
float: left; /* Обтікання блоку справа */
background: #fd0; /* Колір фону */
border: 1px solid black; /* Параметри рамки */
padding: 10px; /* Відступи навколо тексту */
width: 40%; /* Ширина блоку */
}
</style>
</head>
<body>
<div id="layer">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh
euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.
</div>
<div style="clear: left"></div>
<p>Duis autem dolor in hendrerit in vulputate velit esse molestie consequat,
vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto
odio dignissim qui blandit praesent luptatum zzril delenit au gue duis dolore
te feugat nulla facilisi.</p>
</body>
</html>Об'єктна модель
[window.]document.getElementById("elementID").style.clear
Браузери
У браузері Internet Explorer 6 може виникнути помилка, відома як "ефект ку-ку", коли елементи з властивістю clear, що торкаються плаваючих елементів (з властивістю float), можуть зникати.
У браузері Internet Explorer 7 властивість clear не працює для елементів, у яких одночасно вказано властивість float з іншим значенням, ніж clear.
Internet Explorer до версії 7.0 включно не підтримує значення inherit.