LÀM THẾ NÀO ĐỂ - Xóa Pha nổi (Clearfix)
Tìm hiểu cách xóa số trôi nổi bằng cách hack "clearfix".
Cách xóa số nổi (Clearfix)
Các phần tử sau một 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
Bản hack clearfix
Nếu một phần tử cao hơn phần tử chứa nó và nó được thả nổi, nó sẽ tràn ra bên ngoài vùng chứa của nó.
Sau đó, chúng tôi có thể thêm overflow: auto;
vào phần tử chứa để khắc phục sự cố này:
Thí dụ
.clearfix {
overflow: auto;
}
The overflow:auto clearfix works well as long as you are able to keep control of your margins and padding (else you might see scrollbars). The new, modern clearfix hack however, is safer to use, and the following code is used for most webpages:
Example
.clearfix::after {
content: "";
clear: both;
display: table;
}
Tip: Learn more about floats in our CSS Float Tutorial.