Điều này sẽ làm bạn ổn những ngày này (IE 8 trở lên):
.group:after ( content: ""; display: table; clear: both; )Áp dụng nó cho bất kỳ phần tử mẹ nào mà bạn cần xóa các float. Ví dụ:
Bạn sẽ sử dụng điều này thay vì xóa float với một cái gì đó như overflow: hidden;trên cha mẹ (bạn không phải lúc nào cũng muốn ẩn phần tràn ).
Bây giờ cho một chút lịch sử!
Đây là phiên bản phổ biến ban đầu, được thiết kế để hỗ trợ các trình duyệt ở mức có thể:
.clearfix:after ( visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0; ) .clearfix ( display: inline-block; ) /* start commented backslash hack \*/ * html .clearfix ( height: 1%; ) .clearfix ( display: block; ) /* close commented backslash hack */Sau đó, có một chút phiên bản gọn gàng hơn được ghi lại ở đây bởi Jeff Starr, dựa trên thực tế là không ai sử dụng IE cho Mac, đó chính là nguyên nhân của vụ hack dấu gạch chéo ngược.
.clearfix:after ( visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0; ) * html .clearfix ( zoom: 1; ) /* IE6 */ *:first-child+html .clearfix ( zoom: 1; ) /* IE7 */Sau đó, việc sử dụng “group” làm tên lớp trở nên phổ biến, đẹp hơn và có ngữ nghĩa hơn (thông qua Dan Cederholm). Ngoài ra, thuộc contenttính thậm chí không cần khoảng trắng, nó có thể là chuỗi trống (thông qua Nicolas Gallagher). Sau đó, không cần bất kỳ văn bản nào font-sizelà không cần thiết (Chris Coyier).
.group:after ( visibility: hidden; display: block; content: ""; clear: both; height: 0; ) * html .group ( zoom: 1; ) /* IE6 */ *:first-child+html .group ( zoom: 1; ) /* IE7 */Tất nhiên, nếu bạn bỏ hỗ trợ IE 6 hoặc 7, hãy xóa các dòng liên quan.
Cập nhật ngày 18 tháng 5 năm 2011: Nicolas Gallagher một lần nữa với clearfix "vi mô". Cũng xem những thứ bổ sung này..group:before, .group:after ( content: ""; display: table; ) .group:after ( clear: both; ) .group ( zoom: 1; /* For IE 6/7 (trigger hasLayout) */ )Xem phần đầu của trang này để biết phiên bản mới nhất của clearfix.
Trong tương lai, chúng tôi có thể làm:
.group ( display: flow-root; )