Tìm hiểu về class .clearfix của css 2.0

13 Tháng 11

Tìm hiểu về class .clearfix của css 2.0

Bởi Nguyễn Bình Vĩ

code css đầy đủ :

.clearfix:after {
	content: ".";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;
}
.clearfix { display: inline-block; }
* html .clearfix { height: 1%; }
.clearfix { display: block; }

Tại sao và khi nào thì dùng class .clearfix:

Tóm gọn class clearfix dùng để định dạng một block bất kỳ khi bên trong nó chứa các tag có dùng css float VD:

<div class='clearfix'>
 <div style="float: left;">block left</div>
 <p style="float: right;">block right</p>
</div>

class clearfix có tác dụng chiếm toàn bộ khoản trống bên trong nó và có chiều rộng là max so với tag bao ngoài nó.có thể dùng clearfix bất cứ nơi nào bạn muốn, nó không ảnh hưởng đến bố cục riêng của bạn mà sẻ làm cho layout của bạn chặc chẻ hơn rất nhiều. nghĩa là khi bên trong có chứa tag float thì phải có clearfix bao ngoài.

giải thích:

.clearfix:after {
	content: ".";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;
}

thuộc tính ‘:after’ nghĩa là nó sẻ thêm vào phía sau của tag một nội dung bất kỳ.

content: “.”; //đoạn nầy sẻ thêm vào phía sau một dấu “.”.

display: block; //đoạn nầy định dạng cho dấu chấm “.” thành một block .

height: 0; //đoạn nầy định dạng cho dấu “.” chiều cao là 0.

clear: both; //đoạn nầy định dạng cho dấu “.” nằm phía dưới cùng của tag thành một dòng mới.

visibility: hidden; //đoạn nầy định dạng cho dấu “.” ẩn đi để khi sử dụng sẻ không thấy dấu “.” trong html nhưng vẫn giử được các định dạng trên.

* html .clearfix { height: 1%; }

Dòng nầy dùng để hack cho IE6 định dạng cho tag dùng class clearfix với chiều cao tối thiểu là 1% của nó

.clearfix { display: block; }

Dòng nầy dùng định dạng cho tag dùng class clearfix thành một khối hộp để chiếm toàn bộ khoảng trống
.

Hình minh họa:

Chúc các bạn thành công và áp dụng tốt. )

Dragon Blog