CSS Clearfix Hack: Khi nào và cách sử dụng

Là những lập trình viên trong thời đại CSS Flexbox và CSS Grid, chúng ta ít khi nghĩ đến CSS Clearfix. Flexbox và Grid giải quyết việc định vị phần tử tốt hơn (và dễ dàng hơn) so với việc dùng float.

Tuy nhiên, chúng ta vẫn nên biết về clearfix cho những trường hợp làm việc với code cũ (legacy code) sử dụng float mà không có thời gian hoặc ngân sách để chuyển sang phương pháp hiện đại.

Bài viết này sẽ khám phá clearfix hack và giới thiệu display: flow-root như một giải pháp thay thế hiện đại hơn.

Float là gì?

Nhắc lại: thuộc tính float lấy phần tử bạn muốn float và đặt nó về bên trái hoặc bên phải của container chứa nó.

Ví dụ minh họa vấn đề khi dùng float với các phần tử con cao hơn container cha:

<!DOCTYPE html>
<html lang="en">
<head>
  <title>CSS Clearfix</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <style>
    body { background-color: grey; }
    ul {
      max-width: 800px; width: 100%;
      background: lightblue; border: 5px double black; padding: 20px;
    }
    img { width: 300px; margin: 20px; }
    li { list-style: none; float: left; }
  </style>
</head>
<body>
  <ul>
    <li><img src="..." /></li>
    <li><img src="..." /></li>
    <li><img src="..." /></li>
    <li><img src="..." /></li>
    <li><img src="..." /></li>
  </ul>
  <p>Here is a sample paragraph element...</p>
</body>
</html>

Lúc này, các hình ảnh nằm trong <ul> (container nền xanh nhạt) nhưng cao hơn các phần tử khác của <ul>. Điều này gây ra tràn (overflow) không clear được float và margin ngang bị thu gọn. Đó là lý do container nền xanh nhạt lại thấp, các float nằm sai vị trí và đoạn văn <p> xuất hiện cạnh các phần tử float. Đây là hành vi mặc định khi dùng float với phần tử con cao hơn container cha.

Giải pháp: Clearfix Hack

Giải pháp đầu tiên là clearfix hack. Hack này chèn nội dung rỗng sau container cha để nó mở rộng bao quanh các phần tử float. Sử dụng pseudo-element ::after:

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

Áp dụng class clearfix-hack cho container cha (ví dụ <ul class="clearfix-hack">). Selector này nhận 3 thuộc tính: content (chuỗi rỗng), clear: both (xóa cả float trái và phải), display: table (hoặc block) để trình bày nội dung.

Kết quả: container bao quanh đúng các hình ảnh và thẻ <p> hiển thị bên dưới.

Clearfix có còn cần thiết không?

Sự xuất hiện của Flexbox và Grid làm giảm nhu cầu dùng clearfix. Hơn nữa, có cách mới hơn xử lý clearfix trong CSS:

.clearfix-hack { display: flow-root; }

Thay thế selector .clearfix-hack::after bằng code trên. display: flow-root tự động thực hiện clearfix hack và làm code dễ đọc hơn.

Kết luận

Chúng ta đã thảo luận 2 cách sửa lỗi khi thêm float cho phần tử con: clearfix hack và display: flow-root. Có khả năng cao bạn chỉ dùng các hack này trên code cũ, không dùng cho code mới viết từ đầu nhờ sự ra đời của Flexbox và Grid.