Скасування обтікання float

Скасування обтікання блоків (float) найбільш часто зустрічається операція при верстці HTML сторінок. Ми розглянемо всі відомі способи скасувати дію CSS властивості float.

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

Типовий випадок HTML верстки

Блоки .el-1 і .el-2 розміщуються пліч-о-пліч всередині контейнера .container. і один елемент .main слід після .container:

Ми хочемо, щоб висота контейнера .container була рівною висоті найдовшого з його дочірніх елементів (тобто або .el-1. Або .el-2) і щоб блок .main. щоб був після блоку .container.

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

Спосіб 1: метод старої школи

Як вам відомо, CSS властивість clear встановлює з якого боку елемента заборонено його обтікання іншими елементами, отже це властивість може запобігти налезаніе елементів поверх плаваючих. Ідея полягає в наступному: вставте порожній елемент, що якість clear під обтічними блоками. Це використовувати певний клас для подібного об'єкта - давно усталена традиція, так що ви можете використовувати його в вашому HTML. Ось класичний CSS код:

Який можна застосувати до нашої HTML верстці:

Наш демо-приклад, реалізований за допомогою цього методу:

Якщо вас не хвилює схлопивается контейнер, а тільки неправильно розташований блок .main. то ви можете навіть помістити "очищающий потік" елемент br після контейнера. Але, якщо ви вирішите зробити так, то набагато простіше буде просто додати властивість clear самому елементу .main.

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

Спосіб 2: властивість overflow

Використовуючи властивість overflow в тезі .container. ми можемо примусити контейнер розширитися до висоти розміщених елементів. Наш CSS буде виглядати наступним чином:

Наш HTML залишиться таким же, яким і був спочатку, без додаткових елементів. Ось, що ми отримаємо в результаті:

Нажаль, у цього методу є недолік: будь-який дочірній елемент, який виступає за межі контейнера, буде або обрізаний (в разі overflow: hidden;), або викличе появу смуг прокрутки (в разі overflow: auto;).

Спосіб 3: клас "clearfix"

Ми створюємо клас .clearfix з псевдо-елементами :: before і :: after і задаємо їм display: table. що створює анонімну елемент таблиці. Цей клас буде використовуватися для очищення плаваючих елементів. CSS код виглядає так:

Змінимо трохи HTML код додавши до класу container клас clearfix:

Ось результат роботи наешго новвого класу:

Якщо вам не потрібна підтримка браузерів нижче IE8, то наш код значно скоротиться:

Спосіб 4: значення contain-floats для min-height

Специфікація W3C додала нове значення для властивості min-height (і для інших властивостей min / max), для вирішення цієї проблеми. Виглядає воно так:

Цей код дає практично той же ефект, що і clearfix, або overflow, але за допомогою однієї рядки коду і, до того ж він позбавлений тих недоліків, про які ми говорили раніше. На жаль, поки що жоден з браузерів не підтримує це властивість, так що просто майте його на увазі.

Отже, у вас є цілий набір різних «clearfix» методів. Застосування класу .clearfix стало стандартом, і я дуже рекомендую використовувати його замість колишніх двох методів.