Очистить плавающие новые слова

источник :

.clearfix:после {
видимость: скрыта;
дисплей: блок;
размер шрифта: 0;
содержание: " ";
ясно: оба;
высота: 0;
}
.clearfix { display: inline-table };
/* Скрывается из IE-mac */
* html .clearfix { высота: 1% };
.clearfix {дисплей: блок};
/* Завершить скрытие из IE-mac */

проиллюстрировать :

• *Применяет первый блок объявлений к большинству браузеров, соответствующих стандартам, с целью создания невидимого блока пустого содержимого, который очищает числа с плавающей запятой для целевого элемента.
• *Второй элемент применяет атрибут отображения встроенной таблицы для Clearfix, только для IE/Mac.
• *Эксплойт* / Скрыть некоторые правила из IE/Mac:
• * height:1% используется для запуска haslayout в IE6.
• * Повторно примените атрибут отображения блока к IE, отличному от IE/Mac.
• *Последняя строка используется для завершения взлома IE/Mac.

Поскольку браузеры, предназначенные для этого метода, ушли в прошлое (особенно IE5 под Mac) или находятся на пути к тому, чтобы стать стандартами, этот метод уже не так актуален.

После прекращения поддержки IE/Mac появился новый метод очистки плавающих значений:

/* новое исправление */
.clearfix:после {
видимость: скрыта;
дисплей: блок;
размер шрифта: 0;
содержание: " ";
ясно: оба;
высота: 0;
}
* html .clearfix { масштабирование: 1 } /* IE6 */
*:first-child+html .clearfix { масштабирование: 1 } /* IE7 */;

проиллюстрировать :

Ни IE6, ни IE7 не поддерживают псевдокласс :after, поэтому следующие два необходимы для запуска haslayout IE6/7 для очистки чисел с плавающей запятой. К счастью, IE8 поддерживает псевдокласс :after. Так что нужны только хаки для IE6/7.