Це допоможе вам добре в наші дні (IE 8 і вище):
.group:after ( content: ""; display: table; clear: both; )Застосуйте його до будь-якого батьківського елемента, в якому вам потрібно очистити плаваючі знаки. Наприклад:
Ви можете використовувати це, замість того, щоб очистити плаваючий засіб як- overflow: hidden;батьківського (не завжди потрібно ховати переповнення ).
Тепер трохи історії!
Це була оригінальна популярна версія, розроблена для підтримки браузерів якомога раніше:
.clearfix:after ( visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0; ) .clearfix ( display: inline-block; ) /* start commented backslash hack \*/ * html .clearfix ( height: 1%; ) .clearfix ( display: block; ) /* close commented backslash hack */Тоді була трохи чистіша версія, задокументована тут Джеффом Старром, заснована на тому, що IE для Mac ніхто не використовує, саме про це і полягав хак із зворотною рискою.
.clearfix:after ( visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0; ) * html .clearfix ( zoom: 1; ) /* IE6 */ *:first-child+html .clearfix ( zoom: 1; ) /* IE7 */Тоді стало популярним використовувати “групу” як назву класу, що є приємнішим та смисловішим (через Ден Седерхольм). Крім того, contentвластивості навіть не потрібен простір, це може бути порожній рядок (через Ніколаса Галлахера). Тоді, без будь-якого тексту, font-sizeце непотрібно (Кріс Койєр).
.group:after ( visibility: hidden; display: block; content: ""; clear: both; height: 0; ) * html .group ( zoom: 1; ) /* IE6 */ *:first-child+html .group ( zoom: 1; ) /* IE7 */Звичайно, якщо ви втратите підтримку IE 6 або 7, видаліть відповідні рядки.
Оновлення від 18 травня 2011 року: Ніколас Галлахер знову з “мікро” чітким виправленням. Також перегляньте цю додаткову інформацію..group:before, .group:after ( content: ""; display: table; ) .group:after ( clear: both; ) .group ( zoom: 1; /* For IE 6/7 (trigger hasLayout) */ )Дивіться у верхній частині цієї сторінки найсучаснішу версію чіткого виправлення.
У майбутньому ми зможемо зробити:
.group ( display: flow-root; )