วิธีแก้ปัญหา Float ด้วย Clearfix Hack ใน CSS

Clearfix Hack: ทำให้ Container ครอบ Float ได้ถูกต้อง

เมื่อใช้ float บนองค์ประกอบภายใน Container แล้ว Container จะหดรูป (collapsed height) เพราะไม่นับความสูงของลูกที่ float แก้ได้ด้วย Clearfix Hack โดยใช้ overflow: auto หรือ pseudo-element ::after

โค้ดตัวอย่างเปรียบเทียบ

<!DOCTYPE html>
<html>
<head>
  <style>
    body { font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; }
    div { border: 3px solid rgb(21, 0, 114); padding: 5px; }
    img { float: right; }
    .clearfix { overflow: auto; } /* วิธีง่ายที่สุด */
  </style>
</head>
<body>
  <h1>ตัวอย่าง Clearfix Hack</h1>
  <h2>ไม่มี Clearfix (พัง)</h2>
  <div>
    <img src="..." width="100" height="100"/> Sample Text
  </div>
  <h2 style="clear:right">มี Clearfix (ดี)</h2>
  <div class="clearfix">
    <img src="..." width="100" height="100"/> Sample Text
  </div>
</body>
</html>

วิธี Clearfix ที่นิยมใช้

1. overflow: auto/hidden – ง่ายที่สุด แต่อาจตัดเนื้อหาที่ล้น (box-shadow, dropdown)
2. Pseudo-element (แนะนำ) – ไม่มีผลข้างเคียง

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

3. display: flow-root – ทันสมัย รองรับดี ไม่ต้อง hack (IE ไม่รองรับ)

ข้อแนะนำ

ในยุคนี้ ควรใช้ Flexbox หรือ Grid แทน float เพื่อเลย์เอาต์หลัก ใช้ float เฉพาะการห่อข้อความรอบรูปภาพเท่านั้น จะหลีกเลี่ยงปัญหา clearfix ได้โดยสิ้นเชิง