Tìm hiểu thuộc tính clear trong css

Tìm hiểu thuộc tính clear trong css - Tài liệu css

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

Tài liệu tham khảo khác:

 - tai lieu html

 - tai lieu php

 - tai lieu drupal

 - tai lieu wordpress

 - tai lieu photoshop

 - tai lieu corel draw

 - tai lieu illustrator

 - tai lieu seo