Xóa float của element với Bootstrap (clearfix)

Khi dùng float (left/right) cho element con, container cha bị collapse (chiều cao = 0) nếu không clear float. Bootstrap cung cấp class tiện ích .clearfix.

Cách dùng

Thêm class clearfix vào **container cha** của các element float.

Ví dụ Bootstrap 3/4/5

<!DOCTYPE html>
<html>
  <head>
    <title>Bootstrap Clearfix Example</title>
    <link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet">
  </head>
  <body>
    <div class="clearfix" style="background: orange; border: 1px solid #000; padding: 10px;">
      <div class="float-start" style="background: blue; color: white; padding: 10px;">
        Left (float-start)
      </div>
      <div class="float-end" style="background: blue; color: white; padding: 10px;">
        Right (float-end)
      </div>
    </div>
    <p>Container cam có chiều cao bao quanh 2 div float.</p>
  </body>
</html>

Lưu ý class Bootstrap:

• Bootstrap 3: pull-left, pull-right, clearfix.
• Bootstrap 4/5: float-start, float-end (RTL-aware), clearfix.

Nguyên lý .clearfix (CSS thuần)

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

Tạo pseudo-element ::after với clear: both ép container bao quanh float children.

Hiện đại: Không cần clearfix

Dùng Flexbox hoặc Grid cho layout thay vì float:

.container {
  display: flex; /* hoặc display: grid */
  gap: 10px;
}
/* Không cần float, không cần clearfix */

Flexbox/Grid tự động bao quanh con, không bị collapse. Chỉ dùng float/clearfix cho text wrapping quanh ảnh hoặc legacy code.