Khắc phục Parent bị thu gọn bằng cách sử dụng CSS

Một trong những vấn đề mà các nhà phát triển gặp phải khi sử dụng thuộc tính float của CSS là nếu tất cả các phần tử con đều được thả nổi thì vùng chứa mẹ sẽ sụp đổ. Để tránh vùng chứa mẹ bị sập, chúng ta có thể sử dụng một trong các giải pháp sau.

Vấn đề

Các vùng chứa chính được thu gọn khi tất cả nội dung được đưa vào bên trong chúng. Chỉ phần đệm của vùng chứa được nhìn thấy do thuộc tính màu nền CSS.

Ví dụ

Sau đây là mã sự cố cần sửa -

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

Đầu ra

Sau đây là đầu ra cho sự cố -

Khắc phục Parent bị thu gọn bằng cách sử dụng CSS

Giải pháp 1

Chúng ta có thể áp dụng CSS float:left vào vùng chứa mẹ của các phần tử float.

Giải pháp này khắc phục sự cố thành một phần tử còn tồn tại vì bây giờ phần tử cha của phần tử mẹ bị thu gọn và phần tử cha của nội dung nổi được bao bọc xung quanh các phần tử con.

Sau đây là đầu ra cho giải pháp 1 -

Khắc phục Parent bị thu gọn bằng cách sử dụng CSS

Giải pháp 2

Chúng ta có thể sử dụng thuộc tính tràn CSS trên vùng chứa mẹ của các phần tử nổi. Giải pháp này hoạt động tốt nhưng không được sử dụng vì điều này thiếu suy luận logic.

Sau đây là đầu ra cho giải pháp 2 -

Khắc phục Parent bị thu gọn bằng cách sử dụng CSS

Giải pháp 3

Chúng tôi có thể thêm một div trống ở dưới cùng bên trong vùng chứa mẹ với một lớp ‘clearfix’ có nội dung sau.

.clearfix {
   clear: both;
}

Giải pháp này khắc phục sự cố nhưng bây giờ phần tử div trống có ở dưới cùng bên trong vùng chứa mẹ, không đại diện cho nó.

Sau đây là đầu ra cho giải pháp 3 -

Khắc phục Parent bị thu gọn bằng cách sử dụng CSS

Giải pháp 4

Chúng tôi có thể thêm một lớp sử dụng phần tử giả ‘after’ vào vùng chứa mẹ có nội dung sau -

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

Sau đây là đầu ra cho giải pháp 4 -

Khắc phục Parent bị thu gọn bằng cách sử dụng CSS