Bố cục CSS - rõ ràng và rõ ràng
Tài sản rõ ràng
Khi chúng ta sử dụng thuộc tính float
và muốn phần tử tiếp theo ở bên dưới (không phải ở bên phải hoặc bên trái), chúng ta sẽ phải sử dụng thuộc tính clear
.
Thuộc tính clear
chỉ định điều gì sẽ xảy ra với phần tử bên cạnh phần tử nổi.
Thuộc tính clear
có thể có một trong các giá trị sau:
-
none
- Phần tử không được đẩy xuống dưới các phần tử nổi bên trái hoặc bên phải. Đây là mặc định -
left
- Phần tử được đẩy xuống dưới các phần tử nổi bên trái -
right
- Phần tử được đẩy xuống dưới phần tử nổi bên phải -
both
- Phần tử được đẩy xuống dưới cả phần tử nổi bên trái và bên phải -
inherit
- Phần tử kế thừa giá trị rõ ràng từ phần tử gốc của nó
Khi xóa phần nổi, bạn nên khớp phần rõ ràng với phần nổi: Nếu một phần tử được thả nổi sang trái, thì bạn nên xóa phần tử bên trái. Phần tử nổi của bạn sẽ tiếp tục nổi nhưng phần tử đã xóa sẽ xuất hiện bên dưới nó trên trang web.
Ví dụ
Ví dụ này xóa float bên trái. Ở đây, điều đó có nghĩa là phần tử <div2> được đẩy xuống dưới phần tử <div1> nổi bên trái:
div1 {
float: left;
}
div2 {
clear: left;
}
Hãy tự mình thử »Hack Clearfix
Nếu phần tử nổi cao hơn phần tử chứa nó, nó sẽ "tràn" ra ngoài vùng chứa của nó. Sau đó chúng ta có thể thêm một bản hack Clearfix để giải quyết vấn đề này:
Không có Clearfix
Với Clearfix
Tính overflow: auto
xóa tự động 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:
Bạn sẽ tìm hiểu thêm về phần tử giả ::after
ở chương sau.