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:

Chén Hoa Đào

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:

Chén Hoa Đào

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

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

Viết câu trả lời

Drop Images

0 Bình luận