أصل :
.clearfix: بعد {
الرؤية: مخفية ؛
العرض: كتلة ؛
حجم الخط: 0 ؛
محتوى: " "؛
واضح: كلاهما ؛
الارتفاع: 0 ؛
}
.clearfix {display: table table ؛
/* يختبئ من IE-MAC */
* html .clearfix {الارتفاع: 1 ٪ ؛
.clearfix {display: block ؛
/ * نهاية الاختباء من IE-MAC */
يوضح :
* قم بتطبيق كتلة الإعلان الأولى على معظم المتصفحات المتوافقة مع المعيار ، بهدف إنشاء كتلة فارغة غير مرئية لمسح العائمة للعنصر المستهدف.
*ينطبق العنصر الثاني سمة العرض على الطاولة المضمّنة لـ ClearFix ، فقط لـ IE/MAC.
* استخدم* / إخفاء بعض القواعد من IE / MAC:
* الارتفاع: يتم استخدام 1 ٪ لتشغيل Haslayout تحت IE6.
*إعادة تطبيق خصائص عرض كتلة إلى IE خارج IE/MAC.
*يتم استخدام السطر الأخير لإنهاء الاختراق لـ IE/MAC.
نظرًا لأن هذه الطريقة تستهدف المتصفحات التي أصبحت تاريخًا (خاصةً IE5 على MAC) ، أو في طريقهم إلى المعايير ، لم تعد هذه الطريقة تقدمية مثل الأوقات.
بعد التخلص من الدعم لـ IE/MAC ، طريقة جديدة لتطهير العائمة:
/ * جديد ClearFix */
.clearfix: بعد {
الرؤية: مخفية ؛
العرض: كتلة ؛
حجم الخط: 0 ؛
محتوى: " "؛
واضح: كلاهما ؛
الارتفاع: 0 ؛
}
* html .clearfix {Zoom: 1 ؛
*: First-Child+Html .Clearfix {Zoom: 1 ؛
يوضح :
IE6 و IE7 لا يدعمان: بعد الفئة الزائفة ، لذلك هناك حاجة إلى الاثنين التاليين لإثارة haslayout من IE6/7 لمسح العائمة. لحسن الحظ ، يدعم IE8: بعد الفئات الزائفة. لذلك ، هناك حاجة فقط للاختراق لـ IE6/7.