เค้าโครง CSS - ชัดเจนและชัดเจนแก้ไข
ทรัพย์สินที่ชัดเจน
เมื่อเราใช้floatคุณสมบัติและเราต้องการองค์ประกอบถัดไปด้านล่าง (ไม่ใช่ทางขวาหรือซ้าย) เราจะต้องใช้clear
คุณสมบัติ
คุณสมบัติclearระบุสิ่งที่ควรเกิดขึ้นกับองค์ประกอบที่อยู่ถัดจากองค์ประกอบลอย
คุณสมบัติclearสามารถมีค่าใดค่าหนึ่งต่อไปนี้:
-
none- องค์ประกอบไม่ได้ถูกผลักด้านล่างองค์ประกอบที่ลอยไปทางซ้ายหรือขวา นี่คือค่าเริ่มต้น -
left- องค์ประกอบถูกผลักด้านล่างซ้ายองค์ประกอบลอย -
right- องค์ประกอบถูกผลักด้านล่างองค์ประกอบลอยขวา -
both- องค์ประกอบถูกผลักด้านล่างองค์ประกอบลอยทั้งซ้ายและขวา -
inherit- องค์ประกอบสืบทอดค่าที่ชัดเจนจาก parent
เมื่อล้างทุ่น คุณควรจับคู่เคลียร์กับทุ่น: หากองค์ประกอบลอยไปทางซ้าย คุณควรเคลียร์ไปทางซ้าย องค์ประกอบที่ลอยอยู่ของคุณจะยังคงลอยอยู่ แต่องค์ประกอบที่ล้างแล้วจะปรากฏด้านล่างของหน้าเว็บ
ตัวอย่าง
ตัวอย่างนี้ล้างทุ่นไปทางซ้าย นี่หมายความว่าองค์ประกอบ <div2> ถูกผลักด้านล่างองค์ประกอบด้านซ้ายที่ลอย <div1>:
div1 {
float: left;
}
div2 {
clear: left;
}
แฮ็คเคลียร์ฟิกซ์
หากองค์ประกอบที่ลอยอยู่สูงกว่าองค์ประกอบที่มี องค์ประกอบนั้นจะ "ล้น" นอกคอนเทนเนอร์ จากนั้นเราสามารถเพิ่มแฮ็ค clearfix เพื่อแก้ปัญหานี้:
ไม่มี Clearfix
ด้วย Clearfix
ตัวอย่าง
.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;
}
You will learn more about the ::after pseudo-element in a later chapter.