Cách thực hiện - Xóa nổi (Clearfix)
Tìm hiểu cách xóa số float bằng thủ thuật "clearfix".
Cách xóa số float (Clearfix)
Các phần tử sau phần tử nổi sẽ chảy xung quanh nó. Sử dụng bản hack "clearfix" để khắc phục sự cố:
Không có Clearfix
Với Clearfix
Hack Clearfix
Nếu một phần tử cao hơn phần tử chứa nó và được thả nổi, nó sẽ tràn ra ngoài vùng chứa của nó.
Sau đó chúng ta có thể thêm overflow: auto;
vào phần tử chứa để khắc phục sự cố này:
Tính năng xóa tràn: tự động xóa hoạt động tốt miễn là bạn có thể kiểm soát lề và phần đệm của mình (nếu không bạn có thể thấy thanh cuộn). Tuy nhiên, cách hack Clearfix mới, hiện đại sẽ an toàn hơn khi sử dụng và đoạn mã sau được sử dụng cho hầu hết các trang web:
Mẹo: Tìm hiểu thêm về float trong Hướng dẫn CSS Float của chúng tôi.