CSS ระบบจัดเรียง - clear และ clearfix
- หน้าก่อน CSS การลอย
- หน้าต่อไป CSS ระบบจัดเรียง - ตัวอย่างลอย
รายละเอียด clear
clear รายละเอียดนี้กำหนดองค์ประกอบที่สามารถเลื่อนทางด้านข้างองค์ประกอบที่ถูกลบ และทางด้านใด:
clear รายละเอียดนี้สามารถตั้งค่าเป็นหนึ่งในค่าต่อไปนี้:
- none - อนุญาตให้มีองค์ประกอบที่เลื่อนทางด้านซ้ายและขวา. ค่าเริ่มต้น
- left - ไม่อนุญาตให้มีองค์ประกอบที่เลื่อนทางด้านซ้าย
- right - ไม่อนุญาตให้มีองค์ประกอบที่เลื่อนทางด้านขวา
- both - ไม่อนุญาตให้มีองค์ประกอบที่เลื่อนทางด้านซ้ายหรือขวา
- inherit - องค์ประกอบจะสืบทอดค่า clear ของพ่อของมัน
ใช้ clear ความนิยมที่สุดของรายละเอียดนี้คือการใช้ float หลังจากคุณตั้งค่ารายละเอียด.
ในการลบการเลื่อน ควรที่จะตรงกันข้ามกับการเลื่อน: ถ้าองค์ประกอบเลื่อนไปทางด้านซ้าย ก็ควรลบซ้าย. องค์ประกอบที่เลื่อนของคุณจะยังคงเลื่อนต่อไป แต่องค์ประกอบที่ถูกลบจะแสดงขึ้นด้านล่าง.
ตัวอย่างดังกล่าวจะลบการเลื่อนที่มาทางด้านซ้าย. หมายถึงไม่อนุญาตให้มีองค์ประกอบที่เลื่อนอยู่ทางด้านซ้ายของ (div):
ตัวอย่าง
div {
clear: left;
}
clearfix Hack
ถ้าองค์ประกอบเกินกว่าองค์ประกอบที่มีองค์ประกอบดังกล่าว และมันเป็นองค์ประกอบที่เลื่อน มันจะ 'หลุด'ออกนอกช่องที่มีองค์ประกอบดังกล่าว:
หลังจากนั้นเราสามารถเพิ่ม overflow: auto; ไปยังองค์ประกอบที่มีอยู่เพื่อแก้ปัญหานี้:
ตัวอย่าง
.clearfix {
overflow: auto;
}
เมื่อคุณสามารถควบคุมมุมมองด้านนอกและมุมมองด้านใน (เพื่อไม่ให้เห็นเลื่อน) overflow: auto clearfix จะทำงานดี แต่ เทคนิค hack คลิฟแฟร์ใหม่ที่ปลอดภัยที่สุดนั้นใช้ได้ดีกว่า โดยเว็บไซต์ส่วนใหญ่นั้นใช้โค้ดต่อไปนี้:
ตัวอย่าง
.clearfix::after {
content: "";
clear: both;
display: table;
}
คุณจะเรียนรู้ถึงนี้ในบทถัดไป ::after ตัวอักษรเสมือน
- หน้าก่อน CSS การลอย
- หน้าต่อไป CSS ระบบจัดเรียง - ตัวอย่างลอย
