หนึ่งในปัญหาที่นักพัฒนาพบบ่อยขณะใช้คุณสมบัติ CSS float คือ หากองค์ประกอบลูกทั้งหมดถูก float แล้ว คอนเทนเนอร์พาเรนต์ (parent container) จะหดรวม (collapse) เพื่อป้องกันไม่ให้พาเรนต์หดรวม เราสามารถใช้วิธีแก้ไขหนึ่งในวิธีต่อไปนี้ได้
ปัญหา
คอนเทนเนอร์พาเรนต์หดรวม เนื่องจากเนื้อหาทั้งหมดถูก float ไว้ภายใน เห็นเพียงแค่ padding ของคอนเทนเนอร์เนื่องจากคุณสมบัติ CSS background-color
ตัวอย่าง
โค้ดต่อไปนี้คือโค้ดที่มีปัญหาและต้องการแก้ไข:
<!DOCTYPE html> <html> <head> <title>Avoid Parent Container Collapse</title> <style> body{ background-color: grey; border: 4px solid black; } #navbar, #content{ padding: 12px; color: white; } #navbar{ background-color: #C303C3; } li { list-style: none; border: 2px solid black; width:4em; background-color: grey; text-align: center; float: left; } #content { background-color: #4CAF50; } #leftContent, #rightContent { border: 3px solid black; margin:2px; } #leftContent { width: 45%; float: left; } #rightContent { width: 45%; float: right; } </style> <body> <div id="navbar"> <ul> <li>Link 1</li> <li>Link 2</li> <li>Link 3</li> <li>Link 4</li> </ul> </div> <div id="content"> <div id="leftContent"> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </div> <div id="rightContent"> Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </div> </div> </body> </html>
ผลลัพธ์
ผลลัพธ์สำหรับปัญหา:
วิธีแก้ไขที่ 1
เราสามารถใช้ CSS float: left กับคอนเทนเนอร์พาเรนต์ขององค์ประกอบที่ถูก float
วิธีนี้แก้ไขปัญหาได้ในระดับหนึ่ง เนื่องจากตอนนี้พาเรนต์ของพาเรนต์เป็นตัวที่หดรวมแทน และพาเรนต์ของเนื้อหาที่ float ถูกล้อมรอบด้วยองค์ประกอบลูก
ผลลัพธ์สำหรับวิธีแก้ไขที่ 1:
วิธีแก้ไขที่ 2
เราสามารถใช้คุณสมบัติ CSS overflow บนคอนเทนเนอร์พาเรนต์ขององค์ประกอบที่ float วิธีนี้ทำงานได้ดี แต่ไม่ค่อยได้ใช้ เพราะขาดเหตุผลทางตรรกะ
ผลลัพธ์สำหรับวิธีแก้ไขที่ 2:
วิธีแก้ไขที่ 3
เราสามารถเพิ่ม div ว่างที่ด้านล่างภายในคอนเทนเนอร์พาเรนต์ พร้อมคลาส 'clearfix' ที่มีเนื้อหาดังนี้:
.clearfix { clear: both; }
วิธีนี้แก้ไขปัญหาได้ แต่ตอนนี้มี div ว่างอยู่ที่ด้านล่างภายในพาเรนต์ซึ่งไม่ได้แทนอะไรเลย
ผลลัพธ์สำหรับวิธีแก้ไขที่ 3:
วิธีแก้ไขที่ 4 (แนะนำ)
เราสามารถเพิ่มคลาสที่ใช้ pseudo-element 'after' ให้กับคอนเทนเนอร์พาเรนต์ ซึ่งมีเนื้อหาดังนี้:
.clearfix::after { content: ''; display: table; clear: both; }
ผลลัพธ์สำหรับวิธีแก้ไขที่ 4:
