960 của clearfix lưới so với HTML5 của boilerplate clearfix - sự khác biệt là gì?

Question

Làm nổi bật 960 ô lưới so với dấu nhắc của HTML5 Boilerplate - Sự khác biệt là gì?

Đây là clearfix tìm thấy trong 960 lưới của css Nathan Smith:

/* http://www.yuiblog.com/blog/2010/09/27/clearfix-reloaded-overflowhidden-demystified */ 

.clearfix:before, 
.clearfix:after { 
    content: '\0020'; 
    display: block; 
    overflow: hidden; 
    visibility: hidden; 
    width: 0; 
    height: 0; 
} 

.clearfix:after { 
    clear: both; 
} 

/* 
    The following zoom:1 rule is specifically for IE6 + IE7. 
    Move to separate stylesheet if invalid CSS is a problem. 
*/ 

.clearfix { 
    zoom: 1; 
} 

và đây là clearfix tìm thấy trong HTML5 Boilerplate Paul Irish của:

/* The Magnificent Clearfix: Updated to prevent margin-collapsing on child elements. 
    j.mp/bestclearfix */ 

.clearfix:before, .clearfix:after { 
    content: "\0020"; 
    display: block; 
    height: 0; 
    overflow: hidden; 
} 

.clearfix:after { clear: both; } 

/* Fix clearfix: blueprintcss.lighthouseapp.com/projects/15318/tickets/5-extra-margin-padding-bottom-of-page */ 

.clearfix { zoom: 1; } 

Như bạn có thể thấy họ đang RẤT giống. Tuy nhiên chúng khác nhau.

Có ai có thông tin chi tiết về vấn đề này không?

Điều nào tốt hơn và tại sao?

Answer 1

Sự khác biệt duy nhất là 960 nhân có này bên .clearfix:before, .clearfix:after:

visibility: hidden; 
width: 0; 

Khác hơn thế, họ giống hệt nhau.

height: 0; overflow: hiddennên xóa nhu cầu cho bất kỳ khai báo nào khác để ẩn phần tử giả.

Lý thuyết của tôi là HTML5 Boilerplate folks đã xác minh nghiêm ngặt rằng hai khai báo bổ sung này không cần thiết cho bất kỳ trình duyệt nào và sau đó loại bỏ chúng.

Answer 2

clearfix của chúng tôi đã được cập nhật này:

.clearfix:before, .clearfix:after { content: ""; display: table; } 
.clearfix:after { clear: both; } 
.clearfix { zoom: 1; } 

Cụ thể trên this post by Nicolas Gallagher