Khắc phục Container Cha bị Collapsed (thu gọn) bằng CSS

Một trong những vấn đề thường gặp khi sử dụng thuộc tính CSS float là: nếu TẤT CẢ các phần tử con đều được float, thì container cha sẽ bị collapsed (thu gọn, chiều cao bằng 0). Để tránh container cha bị collapsed, ta có thể dùng một trong các giải pháp sau.

Vấn đề

Container cha bị collapsed vì toàn bộ nội dung bên trong đều được float. Chỉ thấy padding của container do 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...</div>
    <div id="rightContent">Duis aute irure...</div>
  </div>
</body>
</html>

Kết quả vấn đề

Giải pháp 1: Float cho container cha

Áp dụng float: left cho container cha của các phần tử được float.

Giải pháp này khắc phục phần nào vấn đề, tuy nhiên bây giờ container cha của container cha bị collapsed, và container cha của nội dung float được bao quanh bởi các phần tử con.

Giải pháp 2: Sử dụng overflow trên container cha

Sử dụng thuộc tính CSS overflow (ví dụ: overflow: hidden hoặc overflow: auto) trên container cha của các phần tử float. Giải pháp này hoạt động tốt nhưng ít được dùng do thiếu cơ sở logic.

Giải pháp 3: Thêm div trống với class clearfix

Thêm một <div> trống ở cuối bên trong container cha với class 'clearfix' có nội dung:

.clearfix { clear: both; }

Giải pháp này khắc phục vấn đề nhưng bây giờ có một phần tử div trống ở cuối bên trong container cha, không đại diện cho nội dung gì.

Giải pháp 4: Sử dụng pseudo-element ::after (Clearfix hiện đại) - KHUYẾN NGHỊ

Thêm một class sử dụng pseudo-element 'after' cho container cha:

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

Giải pháp này sạch sẽ, không thêm phần tử HTML rác, và được sử dụng rộng rãi trong các framework hiện đại (Bootstrap, Tailwind, v.v.)

Tóm tắt so sánh: