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

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

<div class="content">
  <div class="primary">Primary</div>
  <div class="secondary">Secondary</div>
</div>

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

.primary{
  float:left;
  width:70%;
}
.secondary{
  float:right;
  width:30%;
}

[codepen_embed height=”257" theme_id=”6932" slug_hash=”fzuJe” default_tab=”result”]See the Pen <a href=’http://codepen.io/suranartnc/pen/fzuJe/'>fzuJe</a> by Suranart Niamcome (<a href=’http://codepen.io/suranartnc'>@suranartnc</a>) on <a href=’http://codepen.io'>CodePen</a>.[/codepen_embed]

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

<div class="content clearfix">
    ...
</div>

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

.clearfix {
    zoom: 1;
    &:before,&:after{
        content: " ";
        display: table;
    }
    &:after{
        clear: both;
    }
}

[codepen_embed height=”266" theme_id=”6932" slug_hash=”lGvhF” default_tab=”result”]See the Pen <a href=’http://codepen.io/suranartnc/pen/lGvhF/'>lGvhF</a> by Suranart Niamcome (<a href=’http://codepen.io/suranartnc'>@suranartnc</a>) on <a href=’http://codepen.io'>CodePen</a>.[/codepen_embed]

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

%clearfix {
    zoom: 1;
    &:before,&:after{
        content: " ";
        display: table;
    }
    &:after{
        clear: both;
    }
}
.content{
  @extend %clearfix;
}

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

<div class="content">
    ...
</div>