960 grid's clearfix vs HTML5 Kazan plakası clearfix - Fark nedir?

Question

960 grid's clearfix vs HTML5 Kazan plakası clearfix - Fark nedir? Paul İrlandaca HTML5 Boilerplate bulunan Clearfix burada

/* 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; 
} 

ve: İşte

Nathan Smith'in 960 ızgaranın css bulunan Clearfix var Gördüğünüz gibi bunlar

/* 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; } 

ÇOK benzer. Ancak farklılar.

Bu konuda herhangi bir bilgisi var mı?

Hangisi daha iyi ve neden? Bunun dışında

visibility: hidden; 
width: 0; 

, bunlar aynıdır:

Answer 1

tek fark 960 en bu .clearfix:before, .clearfix:after içeride olmasıdır. Sözdizimi öğelerini gizlemek için başka herhangi bir bildirimin gerekliliğini kaldırmalıdır. .

Benim teorim, HTML5 Boilerplate milletlerinin, bu iki ek bildirimin herhangi bir tarayıcı için gerekli olmadığını ve daha sonra bunları kaldırdıklarını sıkı bir şekilde doğruladığıdır.

Answer 2

Bizim Clearfix bu şekilde güncellenmiştir:

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

Detaylar this post by Nicolas Gallagher