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

See the Pen <a href='https://codepen.io/MichaelBondar/pen/NvRLeZ/'>clear-1</a> by MichaelBondar (<a href='https://codepen.io/MichaelBondar'>@MichaelBondar</a>) on <a href='https://codepen.io'>CodePen</a>.

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

See the Pen <a href='https://codepen.io/MichaelBondar/pen/BdLqNg/'>clear-2</a> by MichaelBondar (<a href='https://codepen.io/MichaelBondar'>@MichaelBondar</a>) on <a href='https://codepen.io'>CodePen</a>.

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

See the Pen <a href='https://codepen.io/MichaelBondar/pen/yvYojB/'>yvYojB</a> by MichaelBondar (<a href='https://codepen.io/MichaelBondar'>@MichaelBondar</a>) on <a href='https://codepen.io'>CodePen</a>.

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

See the Pen <a href='https://codepen.io/MichaelBondar/pen/gvaxKK/'>gvaxKK</a> by MichaelBondar (<a href='https://codepen.io/MichaelBondar'>@MichaelBondar</a>) on <a href='https://codepen.io'>CodePen</a>.