Thuộc tính clear

Đăng bởi: Admin

Đị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ợ

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

Link liên quan

Theo dõi VnCoder trên Facebook, để cập nhật những bài viết, tin tức và khoá học mới nhất!