Bố cục CSS - rõ ràng và rõ ràng
Thuộc tính rõ ràng
Khi chúng tôi sử dụng thuộc floattính và chúng tôi 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 tôi sẽ phải sử dụng thuộc clear
tính.
Thuộc cleartính 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 cleartính có thể có một trong các giá trị sau:
-
none- Phần tử không bị đẩy xuống dưới 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 bên dưới các phần tử nổi bên trái -
right- Phần tử được đẩy xuống bên dưới phần tử nổi bên phải -
both- Phần tử được đẩy xuống bên 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ừ cha của nó
Khi xóa các phao, bạn nên khớp phần rõ ràng với phao: Nếu một phần tử được làm nổi ở bên trái, thì bạn nên xóa ở bên trái. Phần tử nổi của bạn sẽ tiếp tục trôi, nhưng phần tử đã xóa sẽ xuất hiện bên dưới phần tử đó trên trang web.
Thí 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 bên dưới phần tử <div1> nổi bên trái:
div1 {
float: left;
}
div2 {
clear: left;
}
Bản hack clearfix
Nếu một phần tử float cao hơn phần tử chứa, 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 một bản hack clearfix để giải quyết vấn đề này:
Không có Clearfix
Với Clearfix
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;
}
You will learn more about the ::after pseudo-element in a later chapter.