بيان جديد واضح عائم

أصل :

.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.