В наши дни это подойдет вам (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 г .: Николас Галлахер снова с «микро» clearfix. Также см. Этот дополнительный материал..group:before, .group:after ( content: ""; display: table; ) .group:after ( clear: both; ) .group ( zoom: 1; /* For IE 6/7 (trigger hasLayout) */ )См. Самую современную версию clearfix в верхней части этой страницы.
В будущем мы, возможно, сможем:
.group ( display: flow-root; )