L布局 CSS - Làm sạch và clearfix

thuộc tính clear

clear thuộc tính xác định yếu tố nào có thể trôi bên cạnh yếu tố được xóa bỏ và bên哪一侧.

clear thuộc tính có thể được thiết lập với một trong các giá trị sau:

  • none - Cho phép cả hai bên đều có yếu tố trôi. Giá trị mặc định
  • left - Không cho phép yếu tố trôi ở bên trái
  • right - Không cho phép yếu tố trôi ở bên phải
  • both - Không cho phép yếu tố trôi ở cả bên trái và bên phải
  • inherit - yếu tố kế thừa giá trị clear của cha

sử dụng clear thường được sử dụng nhất là trên yếu tố đã sử dụng float sau thuộc tính.

Khi xóa bỏ trôi, bạn nên khớp với trôi và xóa bỏ: Nếu một yếu tố trôi về bên trái, bạn nên xóa bỏ bên trái. Các yếu tố trôi của bạn sẽ tiếp tục trôi, nhưng yếu tố được xóa bỏ sẽ hiển thị dưới đó.

Ví dụ sau sẽ xóa bỏ trôi về bên trái. Nó biểu thị rằng không cho phép yếu tố trôi xuất hiện ở bên trái của (div):

Mẫu

div {
  clear: left;
}

Thử ngay

clearfix Hack

Nếu một yếu tố cao hơn yếu tố chứa nó và nó là một yếu tố trôi, nó sẽ 'tràn' ra ngoài khung của nó:

Sau đó chúng ta có thể thêm overflow: auto; vào phần chứa để giải quyết vấn đề này:

Mẫu

.clearfix {
  overflow: auto;
}

Thử ngay

Chỉ cần bạn có thể kiểm soát biên giới ngoài và biên giới trong (nếu không bạn có thể nhìn thấy thanh cuộn), overflow: auto clearfix sẽ hoạt động rất tốt. Nhưng, công nghệ hack clearfix hiện đại mới hơn sử dụng an toàn hơn, mã sau được áp dụng trên nhiều trang web:

Mẫu

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

Thử ngay

Bạn sẽ học về điều này trong phần sau ::after 元素 ảo .