แก้ไขพาเรนต์ที่ยุบโดยใช้ CSS

หนึ่งในปัญหามากมายที่นักพัฒนาต้องเผชิญขณะใช้คุณสมบัติ CSS float คือหากองค์ประกอบย่อยทั้งหมดลอยอยู่ คอนเทนเนอร์หลักจะยุบ เพื่อหลีกเลี่ยงไม่ให้คอนเทนเนอร์หลักล่ม เราสามารถใช้หนึ่งในวิธีแก้ไขปัญหาต่อไปนี้

ปัญหา

คอนเทนเนอร์ระดับบนสุดจะยุบลงเนื่องจากเนื้อหาทั้งหมดลอยอยู่ภายใน มีเพียงช่องว่างภายในของคอนเทนเนอร์เท่านั้นที่มองเห็นได้เนื่องจากคุณสมบัติสีพื้นหลัง CSS

ตัวอย่าง

ต่อไปนี้เป็นรหัสปัญหาที่ต้องแก้ไข -

<!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>

ผลลัพธ์

ต่อไปนี้เป็นผลลัพธ์สำหรับปัญหา -

แก้ไขพาเรนต์ที่ยุบโดยใช้ CSS

แนวทางที่ 1

เราสามารถใช้ CSS float:left to the parent container ขององค์ประกอบ floated.

วิธีแก้ปัญหานี้แก้ไขปัญหาที่ยังหลงเหลืออยู่ เนื่องจากขณะนี้องค์ประกอบระดับบนสุดขององค์ประกอบหลักถูกยุบและองค์ประกอบหลักของเนื้อหาแบบลอยตัวถูกห่อหุ้มรอบองค์ประกอบย่อย

ต่อไปนี้เป็นผลลัพธ์สำหรับโซลูชัน 1 -

แก้ไขพาเรนต์ที่ยุบโดยใช้ CSS

โซลูชันที่ 2

เราสามารถใช้คุณสมบัติล้น CSS บนคอนเทนเนอร์หลักขององค์ประกอบลอย วิธีแก้ปัญหานี้ใช้ได้ดีแต่ไม่ได้ใช้เพราะขาดเหตุผลเชิงตรรกะ

ต่อไปนี้เป็นผลลัพธ์สำหรับโซลูชัน 2 -

แก้ไขพาเรนต์ที่ยุบโดยใช้ CSS

โซลูชันที่ 3

เราสามารถเพิ่ม div ว่างที่ด้านล่างของคอนเทนเนอร์หลักด้วยคลาส 'clearfix' มีเนื้อหาดังต่อไปนี้

.clearfix {
   clear: both;
}

วิธีแก้ปัญหานี้แก้ไขปัญหาได้ แต่ตอนนี้องค์ประกอบ div ว่างเปล่าปรากฏอยู่ที่ด้านล่างสุดของคอนเทนเนอร์หลักซึ่งไม่ได้แสดงถึงสิ่งใด

ต่อไปนี้เป็นผลลัพธ์สำหรับโซลูชัน 3 -

แก้ไขพาเรนต์ที่ยุบโดยใช้ CSS

โซลูชันที่ 4

เราสามารถเพิ่มคลาสที่ใช้องค์ประกอบหลอก ‘หลัง’ ไปยังคอนเทนเนอร์หลักที่มีเนื้อหาดังต่อไปนี้ -

.clearfix {
.clearfix::after {
   content: '';
   display: table;
   clear: both;
}

ต่อไปนี้เป็นผลลัพธ์สำหรับโซลูชัน 4 -

แก้ไขพาเรนต์ที่ยุบโดยใช้ CSS