Thuộc tính clear

Định nghĩa và sử dụng

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 class="exFloat"><img src="images/img_webstandard.gif" alt="HỌC WEB CHUẨN" /></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:

HỌC WEB CHUẨN

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:

HỌC WEB CHUẨN

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ợ

  • Internet Explorer
  • Firefox
  • Opera
  • Google Chrome
  • Safari

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