สอนวิธีใช้ CSS Clearfix

การ clearfix ก็คือการทำให้ block element สามารถครอบ element ข้างในที่ float อยู่ได้ สมมติเรามีโค้ด html แบบนี้

เนื่องจากเราต้องการจะจัดตำแหน่งให้กับ .primary และ .secondary เราจึงใช้ float เข้ามาช่วย

See the Pen fzuJe by Suranart Niamcome (@suranartnc) on CodePen.

เมื่อลองพรีวิวดู จะเห็นว่า .content นั้นไม่ได้ครอบ .primary และ .secondary อย่างที่ควรจะเป็น ให้เราแก้ปัญหานี้โดยการเพิ่ม class ชื่อ “clearfix” เข้าไป

จากนั้นให้เรากำหนดสไตล์ให้กับ .clearfix ดังนี้ (ขออนุญาตเขียนแบบ scss)

See the Pen lGvhF by Suranart Niamcome (@suranartnc) on CodePen.

เพียงเท่านี้ .content ก็จะครอบ .primary และ .secondary แล้ว และหากเราต้องการจะ clearfix ที่ element อื่นๆ อีก เราก็สามารถทำได้ง่ายๆ เพียงแค่เพิ่ม class “clearfix” เข้าไปเท่านั้นเอง แต่หากใครไม่อยากใส่ class เพิ่ม ก็ให้เปลี่ยนมาใช้ @extend ร่วมกับ Placeholder Selector ของ Sass แทนก็ได้

เพียงเท่านี้ เราก็ไม่จำเป็นต้องใส่ class เพิ่มเข้ามาแล้ว

(Visited 3,424 times, 1 visits today)

One Response to “สอนวิธีใช้ CSS Clearfix”

  1. โค๊ด zoom: 1; เอาไว้ใช้ทำอะไรหรอครับ

Leave a Reply