Коли всередині батьківського блоку знаходяться тільки float (плаваючі) елементи, то батьківський блок схлопивается. Як прибрати обтікання і розкрити батьківський блок розглянемо далі.
Перед тим як почати, давайте позначимо деякі визначення:
- батьківським блоком можна назвати будь-який блок щодо вкладених в нього блоків, наприклад блок
- - батьківський для вкладених в нього елементів списку -
- ;
- дочірній блок - це відповідно будь-який вкладений блок щодо боки верхнього рівня.Позначимо проблему з обтічністю
Зробимо звичайний список, елементи якого мають float: left;
В результаті батьківський блок схлопивается:
(Для наочності я прописав червоний бордер для батьківського елемента)
Для того щоб цього не відбувалося необхідно прибрати обтічність після елементів списку і для цього є кілька способів.
Прибрати обтічність
Перший спосіб боротьби - це задати overflow: hidden для батьківського елемента.
Таким чином ми прибираємо обтічність, батьківський блок розуміє де кінчається плаваючі елементи і схлопування не відбувається.
Такий варіант може не підійти в разі, якщо у вас меню з випадають підпунктами, тому що батьківський блок буде обрізати випадають елементи.
Другий спосіб.
Другий спосіб дуже хороший і має кросбраузерності підтримку. Необхідно батьківський елемент позначити як inline-block і задати 100% ширину.Проблему з whitespace`ом у інлайнових елементів можна вирішити почитавши цей пост CSS - як прибрати проміжки між inline блоками?
Третій спосіб.
Можна банально додати всередину батьківського блоку, в самому кінці ще один блок, якому прописати стилі з очищенням обтічності.І прописати стилі для класу .clear
Але цей варіант досить не практичний, тому що ми створюємо окремий порожній елемент в нашій верстці, що не їсти гуд
Четвертий спосіб.
По суті він відштовхується від попереднього рішення, але замість створення порожнього блоку, ми скористаємося псевдо-елементом: after.Ось таке рішення набагато естетичніше!
Для вас все приклади зі стилю ми виклав в демке, можете потестить на різних браузерах і підібрати собі свій варіант.