Clearfix хак популярний спосіб правильного відображення плаваючих блоків, що дозволяє не вдаватися до допомоги таблиць при верстці. Необхідність в ньому виникає коли ви починаєте помічати, що висота батьківського блоку DIV не відповідає вмісту спадкоємців. Наприклад ви задумали таку організацію блоків у себе на сайті (для наочності батьківський блок виділено жовтим кольором, а дочірні - зеленим і червоним):
Для чого написали таку HTML сторінку:
і до неї відповідний CSS файл стилів:
Однак в реальності ви отримаєте таку картинку:
Батьківський DIV не обіймалися дочірні. Тобто не розтягується по висоті входять в нього блоків. І ніякої помилки тут немає, просто в верстці використовують плаваючі блоки (властивість FLOAT). Плаваючі елементи вириваються з поточного потоку і створюють в батьківському контексті між собою власний. При цьому для зовнішнього потоку вони не матимуть розмірів. І щоб батьківський DIV враховував їх розмір і розтягувався по їх вмісту необхідна невелика хитрість.
Два способи як розтягнути розмір батьківського DIV по вмісту входять до нього блоків
Раніше я використовував такий додатковий блок перед закриває тегом батьківського DIV:
Після чого зовнішній вигляд сторінки відповідав задуманому:
Другий спосіб як змусити батьківський div розтягуватися по висоті дочірнього
Можна зробити «самоочищається» контейнер через псевдоклас after:
А батьківського блоку додати відповідний клас:
Зовнішній вигляд сторінки так само буде відповідати задуманої верстці:
Обидва способи добре працюють. І дозволяють вирішити проблему плаваючих блоків, щоб батьківський DIV розтягувався по висоті вмісту дочірніх.
Читайте також: Лепкий сайдбар WordPress без плагінів. CSS і Theia Sticky Sidebar.