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

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

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

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

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

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

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

автор: Svitlana

Нотатка

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

.element::after { 
   content: "";
   display: block; 
   clear: both;
}

автор: Svitlana

Синтаксис

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

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

none

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

автор: Svitlana

left

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

автор: Svitlana

right

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

автор: Svitlana

both