Xóa float với Clearfix Hack trong CSS

Clearfix hack là kỹ thuật cổ điển để chứa các phần tử con float bên trong container cha, ngăn chặn hiện tượng "collapse" (cha co lại độ cao 0). Dưới đây là cách thực hiện:

Ví dụ mã nguồn

<!DOCTYPE html>
<html>
<head>
<style>
  body {
    font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  }
  div {
    border: 3px solid rgb(21, 0, 114);
    padding: 5px;
  }
  img {
    float: right;
  }
  .clearfix {
    overflow: auto; /* Cách đơn giản nhất */
  }
</style>
</head>
<body>
<h1>Ví dụ Clearfix hack</h1>
<h2>Không có Clearfix</h2>
<div>
  <img src="https://i.picsum.photos/id/17/300/300.jpg" width="100" height="100"/> Văn bản mẫu
</div>
<h2 style="clear:right">Có Clearfix</h2>
<div class="clearfix">
  <img src="https://i.picsum.photos/id/17/300/300.jpg" width="100" height="100"/> Văn bản mẫu
</div>
</body>
</html>

Các phương pháp Clearfix phổ biến

Khuyến nghị

Nên sử dụng Flexbox hoặc Grid cho layout mới. Clearfix pseudo-element vẫn hữu ích khi maintain code cũ dùng float.