css властивість clear


Властивість clear встановлює, з якого боку елемента заборонено його обтікання іншими елементами.

Властивість `clear`

Скасувати заборону на обтікання можна за допомогою css властивість clear. Іншими словами, властивість визначає чи елемент має бути розміщений поруч із пливучим елементом чи переміщений донизу.

Ви можете вказати сторону(або обидві), з якої елемент не буде обтікатися іншими.

Якщо застосувати властивість для непливучого елементу, він переміщується донизу, доки його межа не буде нижча за межі верхнього пливучого елементу. Під час цього переміщення не відбувається ефект об'єднання відступів(margin).

Якщо застосувати властивість для пливучого елементу, його поведінка схожа, з попереднім прикладом, але у цьому випадку наступні пливучі елементи, які розміщені нижче сторінкою, не можуть бути розміщені вище за попередні.

Нотатка:

Важливо: Якщо елемент містить тільки пливучих нащадків, його висота дорівнюватиме нулю. Якщо Ви хочете змінити його висоту, треба задати для його нащадків очищення(clear). Це називається clearfix. Один зі способів це зробити, додати псевдоелемент з очищенням:

.element::after { 

   content: "";

   display: block; 

   clear: both;

}

Синтаксис

clear: none|left|right|both|initial|inherit;

Властивість clear може отримувати 6 значень:

none

Без задання. Дозволяє обтікання елемента з усіх сторін.

left

Скасовує обтікання з лівого краю елемента. При цьому всі елементи, що розташовані ліворуч будуть опущені вниз, тобто, розташуються під поточним елементом.

right

Скасовує обтікання з правого боку елемента. При цьому всі інші елементи розташовані праворуч будуть опущені вниз і розташуються під поточним елементом.

both

Скасовує обтікання елемента одночасно з правого і лівого краю.

initial

Встановлює властивість у значення без задання

inherit

Вказує на спадковість властивості від свого батьківського елемента

Значення без задання: none
Наслідує: Ні
Анімується: Ні
JavaScript синтаксис: object.style.clear="both"

Переглядачі

Переглядач
clear

1.0

8.0

1.0

1.0

3.5

Переглядач
clear

1.0

1.0

1.0


Мобільних переглядачів ще не додано.

Приклади


Демонстрації дії різних значень властивості clear

Простий приклад роботи властивості clear

Демонстрація роботи властивості

Динамічний приклад

Додаткові посилання