แบบที่จะล้าง floating (Clearfix)

เรียนรู้วิธีการใช้ technique clearfix ที่ล้าง floating

ทัศนะคติ clearfix

หากองค์ประกอบเหลือนอกขององค์ประกอบที่มีอยู่สูงกว่าองค์ประกอบที่มีอยู่ และมันเป็น floating มันจะหลุดออกนอกตัวแทนของมัน

ดังนั้น สามารถเพิ่ม overflow: auto; ให้กับองค์ประกอบที่มีอยู่เพื่อแก้ปัญหานี้:

ตัวอย่าง

.clearfix {
  overflow: auto;
}

ลองทดลองด้วยตัวเอง

เพียงแค่คุณสามารถควบคุม margin และ paddingoverflow:auto ปรากฏการณ์การล้างขวางน้ำหลากดีมาก (ถ้าไม่ คุณอาจจะเห็น scrollbar)

อย่างไรก็ตาม，ทัศนะคติ modern clearfix ใช้งานได้ง่ายและปลอดภัยมากขึ้น ส่วนใหญ่ของเว็บไซต์ใช้รหัสดังนี้:

ตัวอย่าง

.clearfix::after {
  content: "";
  clear: both;
  display: table;
}

ลองทดลองด้วยตัวเอง

หน้าที่เกี่ยวข้อง

ตัวเรียน:CSS การขวางและการเคลี่ยนเลือก