วิธีการ - เคลียร์โฟลต (เคลียร์ฟิกซ์)
เรียนรู้วิธีล้างโฟลตด้วยแฮ็ค "clearfix"
วิธีการล้างโฟลต (เคลียร์ฟิกซ์)
องค์ประกอบหลังองค์ประกอบลอยจะไหลไปรอบๆ ใช้แฮ็ค "clearfix" เพื่อแก้ไขปัญหา:
ไม่มี Clearfix
ด้วย Clearfix
แฮ็คเคลียร์ฟิกซ์
หากองค์ประกอบสูงกว่าองค์ประกอบที่มีอยู่ และลอยอยู่ องค์ประกอบนั้นจะล้นนอกคอนเทนเนอร์
จากนั้นเราสามารถเพิ่มoverflow: auto;
องค์ประกอบที่มีเพื่อแก้ไขปัญหานี้:
ตัวอย่าง
.clearfix {
overflow: auto;
}
The overflow:auto clearfix works well as long as you are able to keep control of your margins and padding (else you might see scrollbars). The new, modern clearfix hack however, is safer to use, and the following code is used for most webpages:
Example
.clearfix::after {
content: "";
clear: both;
display: table;
}
Tip: Learn more about floats in our CSS Float Tutorial.