cách xóa trôi nổi (Clearfix)

học cách sử dụng kỹ thuật clearfix để xóa trôi nổi.

kỹ thuật clearfix

nếu một phần tử cao hơn phần tử bao gồm nó và nó trôi nổi, nó sẽ tràn ra khỏi khối chứa.

thì, chúng ta có thể thêm overflow: auto; vào phần tử bao gồm để giải quyết vấn đề này:

thực例

.clearfix {
  overflow: auto;
}

Thử nghiệm trực tiếp

nếu bạn có thể kiểm soát lề ngoài và lề trong,overflow: auto hiệu ứng xóa trôi nổi rất tốt (nếu không, bạn có thể thấy thanh cuộn).

mặc dù vậy, kỹ thuật clearfix hiện đại mới hơn sử dụng an toàn hơn, hầu hết các trang web đều sử dụng mã sau:

thực例

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

Thử nghiệm trực tiếp

Trang liên quan

Hướng dẫn:CSS Duyệt