ในยุคของ CSS Flexbox และ CSS Grid เราไม่ค่อยพิจารณา CSS Clearfix มากนัก เพราะ Flexbox และ Grid จัดการตำแหน่ง元素ได้ดีกว่าและง่ายกว่าการใช้ floats
อย่างไรก็ตาม เราควรรู้จัก clearfix สำหรับกรณีที่ทำงานกับโค้ดเก่า (legacy code) ที่ใช้ floats และไม่มีเวลาหรืองบประมาณเปลี่ยนไปใช้วิธีสมัยใหม่
บทความนี้จะสำรวจ clearfix hack และ介绍 display: flow-root เป็นทางเลือกใหม่ที่แทนที่ clearfix ได้
Float คืออะไร?
คุณสมบัติ float นำ元素ที่ต้องการไปวางทางซ้ายหรือขวาของคอนเทนเนอร์ (container)
<!DOCTYPE html> <html lang="en"> <head> <title>CSS Clearfix</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> body { background-color: grey; } ul { max-width: 800px; width: 100%; background: lightblue; border: 5px double black; padding: 20px; } img { width: 300px; margin: 20px; } li { list-style: none; float: left; } </style> </head> <body> <ul> <li><img src="..." /></li> <li><img src="..." /></li> <li><img src="..." /></li> <li><img src="..." /></li> <li><img src="..." /></li> </ul> <p>Here is a sample paragraph element...</p> </body> </html>
ภาพใน <ul> สูงกว่าของอื่น ทำให้เกิด overflow ที่ไม่ clear float และขอบแนวนอนหดรวม (collapsed margins) นั่นคือเหตุผลที่คอนเทนเนอร์สีฟ้าอ่อนสั้นเกินไป floats วางตำแหน่งผิด และ元素 <p> อยู่ข้างๆ float elements นี่คือพฤติกรรมเริ่มต้นเมื่อใช้ float กับ child elements ที่สูงกว่า parent container
วิธีแก้ไข: Clearfix Hack
วิธีแรกคือ clearfix hack วิธีนี้แทรกเนื้อหาว่างหลัง parent container เพื่อให้ขยายครอบคลุม floated elements ใช้ pseudo-element ::after:
.clearfix-hack::after { content: " "; clear: both; display: table; }
เพิ่ม selector .clearfix-hack::after ที่มี 3 คุณสมบัติ: content, display, clear
content: " "— สตริงว่างclear: both— เคลียร์ float ทั้งซ้ายและขวาdisplay: table(หรือ block) — แสดงข้อมูล/ภาพบนหน้า
ผลลัพธ์คือ ภาพแสดงในคอนเทนเนอร์ได้ถูกต้อง และ <p> อยู่ด้านล่าง
Clearfix ยุคใหม่: display: flow-root
ด้วย Flexbox และ Grid ความจำเป็นของ clearfix ลดลง ยิ่งไปกว่านั้น มีวิธีใหม่จัดการ clearfix:
.clearfix-hack { display: flow-root; }
แทนที่ .clearfix-hack::after ด้วยโค้ดข้างต้น display: flow-root ทำ clearfix ให้โดยอัตโนมัติ และทำให้โค้ดอ่านง่ายขึ้น
สรุป
เราได้อภิปราย 2 วิธีแก้บั๊กจาก float property: clearfix hack และ display: flow-root สבירว่า คุณจะใช้วิธีเหล่านี้กับ legacy code เท่านั้น ไม่ใช่โค้ดใหม่ เพราะ Flexbox และ Grid แทนที่ได้แล้ว
