เคลียร์คำสั่งใหม่ที่ลอยอยู่

ต้นทาง :

.ClearFix: หลังจาก {
ทัศนวิสัย: ซ่อน;
แสดง: บล็อก;
ขนาดตัวอักษร: 0;
เนื้อหา: " ";
ชัดเจน: ทั้งสอง;
ความสูง: 0;
-
.ClearFix {Display: Inline-Table;
/* ซ่อนจาก IE-MAC */
* html .learfix {ความสูง: 1%;
.ClearFix {display: block;}
/ * สิ้นสุดซ่อนจาก IE-MAC */

ภาพประกอบ :

• * ใช้บล็อกประกาศครั้งแรกกับเบราว์เซอร์ที่สอดคล้องกับมาตรฐานส่วนใหญ่โดยมีเป้าหมายในการสร้างบล็อกโมฆะที่มองไม่เห็นเพื่อ ล้างการลอยตัว สำหรับองค์ประกอบเป้าหมาย

• *รายการที่สองใช้แอตทริบิวต์การแสดงผลแบบอินไลน์สำหรับ ClearFix เฉพาะสำหรับ IE/MAC เท่านั้น

• * ใช้* / ซ่อนกฎบางอย่างจาก IE / MAC:

• * ความสูง: 1% ใช้เพื่อทริกเกอร์ Haslayout ภายใต้ IE6

• *reapply block properties การแสดงผลไปยัง IE OUTHTAL IE/MAC

• *บรรทัดสุดท้ายใช้เพื่อจบการแฮ็คสำหรับ IE/Mac

เนื่องจากวิธีนี้มีเป้าหมายที่เบราว์เซอร์ที่กลายเป็นประวัติศาสตร์ (โดยเฉพาะอย่างยิ่ง IE5 บน Mac) หรือกำลังจะไปถึงมาตรฐานวิธีนี้จึงไม่ก้าวหน้าเท่าเวลาอีกต่อไป

หลังจากทิ้งการสนับสนุนสำหรับ IE/Mac วิธีการใหม่ในการล้างลอย:

/ * ใหม่ Clearfix */
.ClearFix: หลังจาก {
ทัศนวิสัย: ซ่อน;
แสดง: บล็อก;
ขนาดตัวอักษร: 0;
เนื้อหา: " ";
ชัดเจน: ทั้งสอง;
ความสูง: 0;
-
* html .learfix {ซูม: 1;} / * ie6 * /
*: เด็กแรก

ภาพประกอบ :

IE6 และ IE7 ไม่สนับสนุน: หลังจาก Pseudo-class ดังนั้นอีกสองจึงจำเป็นต้องเรียกใช้ Haslayout ของ IE6/7 เพื่อล้างการลอย โชคดีที่ IE8 รองรับ: หลังจากคลาสหลอก ดังนั้นจึงจำเป็นต้องมีการแฮ็คสำหรับ IE6/7 เท่านั้น