Thuộc tính clear trong CSS
Thuộc tính clear xác định 2 bên của phần tử (left, right), nơi mà phần tử float không được cho phép (ngăn cản thành phần không được float trái, phải hay cả hai).
Cấu trúc
tag {
clear: giá trị;
}Với giá trị như sau:
| Thuộc tính | giá trị | Ví dụ | Mô tả |
|---|---|---|---|
| clear | left | clear: left; | Bên trái của thành phần không được float. |
| right | clear: right; | Bên phải của thành phần không được float. | |
| both | clear: both; | Bên trái và phải của thành phần không được float. | |
| none | clear: none; | Đây là mặc định của thành phần clear, bên trái và phải của thành phần được float. | |
| inherit | clear: inherit; | Xác định thừa hưởng thuộc tính từ thành phần cha (thành phần bao ngoài). |
Ví dụ
HTML viết:
<html>
<head></head>
<body>
<p ="exFloat"><img style="width:129px" src="https://media.hoclaptrinh.vn/images/5c41971a6ac93.jpg" alt="Chén Hoa Đào" /></p>
<p>Dòng text này không sử dụng thuộc tính clear, nên bị ảnh hưởng float của thành phần p có class
=exFloat</p>
<p class="exClear">Dòng text này có sử dụng thuộc tính clear, nên không bị ảnh hưởng float của
thành phần p class=exFloat</p>
</body>
</html>CSS viết:
Giả sử ta có một thành phần dùng float: left; như sau
p.exFloat {
float: left;
}Hiển thị trình duyệt khi chưa dùng thuộc tính clear:
Dòng text này không sử dụng thuộc tính clear, nên bị ảnh hưởng float của thành phần p có class =exFloat
Dòng text này có sử dụng thuộc tính clear, nên không bị ảnh hưởng float của thành phần p class=exFloat
Thêm thuộc tính clear vào CSS:
p.exFloat {
float: left;
}
p.exClear {
clear: left;
}Hiển thị trình duyệt khi dùng thuộc tính clear left:
Dòng text này không sử dụng thuộc tính clear, nên bị ảnh hưởng float của thành phần p có class =exFloat
Dòng text này có sử dụng thuộc tính clear, nên không bị ảnh hưởng float của thành phần p class=exFloat
Trình duyệt hỗ trợ
Thuộc tính clear được hỗ trợ trong đa số các trình duyệt.
Giá trị "inherit" không hỗ trợ trình duyệt IE7 trở xuống, IE8 đòi hỏi phải có !Doctype
