Clearfix
หลายครั้งที่เราเขียน CSS แล้วปรากฏว่า เอ๊ะ! ทำไมเลเอาท์เสียเมื่อเรา ใส่ค่า float: left หรือ float:right
การทำเป็นสองคอลัมน์โดยให้อยู่ในระนาบเดียวกันนั้นนิยมเขียน float: left หรือ float:right แล้วก็มีผลกระทบต่อ element ต่อไปที่อยู่ด้านล่าง ทำให้เสียรูปทรงไปเลยก็มี
Source code HTML
// ยังไม่มีการ clearfix รูปด้านซ้าย
<div>
<div style="float:left;"></div>
<div style="float:right;"></div>
</div>
// มีการใช้คลาส clearfix รูปด้านขวา
<div class="clearfix">
<div style="float:left;"></div>
<div style="float:right;"></div>
</div>
การเขียน HTML เพื่อให้เป็นสองคอลัมน์
รูปด้านซ้าย จะเห็นได้ว่า div ที่เป็นสีดำ จะไม่คลุม div สีแดง ซึ่งเป็น float:left และ div สีเขียว ซึ่งเป็น float:right ซึ่งจะมีปัญหากับ element อื่น ๆ ได้
*(ถ้ากรณีที่ div สีแดง หรือ div สีเขียว สูงไม่เท่ากัน)
ส่วนรูปด้านขวา เมื่อมีการเรียกใช้งาน class="clearfix" แล้วจะเห็นได้ว่า div ที่เป็นสีดำ จะคลุม div สีแดง ซึ่งเป็น float:left และ div สีเขียว ซึ่งเป็น float:right ซึ่งไม่มีปัญหากับ element อื่น ๆ
*(ถึงแม้ว่า div สีแดง หรือ div สีเขียว สูงไม่เท่ากัน แต่ก็ยังอยู่ใน div สีดำ)
Source code class clearfix
.clearfix:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}
.clearfix {
display: inline-block;
}
html[xmlns] .clearfix {
display: block;
}
* html .clearfix {
height: 1%;
}