Bạn vẫn dùng float để layout? Đây là lý do nên dừng ngay

Cái thời float "hack" layout đã qua rồi

Nếu bạn bắt đầu học CSS từ 2-3 năm trước, chắc chắn bạn từng gặp float: left rồi clearfix rồi đủ thứ hack để căn 2 cột ngang nhau. Nghe quen không?

Tin vui là — bạn không cần float cho layout nữa. Flexbox và Grid đã thay thế hoàn toàn, và trình duyệt hỗ trợ từ lâu rồi.

Vậy tại sao vẫn có người dùng float? Và chuyển sang Flexbox/Grid thực sự dễ đến mức nào?

Flexbox — Giải quyết 90% bài toán layout

Flexbox sinh ra để xếp phần tử theo 1 chiều — ngang hoặc dọc. Chỉ cần 3 dòng CSS là bạn có layout mà ngày xưa phải hack cả buổi:

.container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

Xong. Không cần float, không cần clearfix, không cần overflow: hidden. Các phần tử tự căn đều, tự responsive.

Nhưng nếu bạn cần layout 2 chiều thì sao?

CSS Grid — Khi Flexbox không đủ

Grid dành cho layout 2 chiều — cả hàng và cột cùng lúc. Ví dụ: dashboard có sidebar, header, content, footer:

.layout {
  display: grid;
  grid-template-columns: 250px 1fr;
  grid-template-rows: 60px 1fr 40px;
  gap: 1rem;
}

So với float, bạn tiết kiệm được 50-70% số dòng CSS và code dễ đọc hơn gấp bội. Người mới nhìn vào hiểu ngay cấu trúc trang.

Vậy khi nào dùng Flexbox, khi nào dùng Grid?

Chọn đúng công cụ cho đúng việc

Thực tế thì bạn sẽ dùng cả hai — Grid cho layout tổng thể, Flexbox cho từng component bên trong. Không có cuộc chiến nào ở đây cả.

Từ float sang Flex/Grid trong 5 phút

Nếu project cũ đang dùng float, đây là cách chuyển nhanh nhất:

1. Tìm tất cả .clearfix và float: left/right trong code
2. Thay parent container bằng display: flex hoặc display: grid
3. Xóa clearfix, overflow: hidden, width: 33.33% hack
4. Dùng gap thay margin giữa các phần tử

Bạn muốn đi sâu hơn? Bài này giải thích cách tư duy layout từ góc nhìn designer — rất hữu ích nếu bạn muốn hiểu tại sao Grid lại hợp với design system.

Trong bài tiếp theo, mình sẽ hướng dẫn cách dùng CSS Grid để tạo responsive layout không cần media query — nghe điên nhưng hoàn toàn được. Đón đọc nhé!