Clearfix de la grille de 960 vs clearfix de HTML5 Boilerplate - Quelle est la différence?

960 grille clearfix vs HTML5 Boilerplate est clearfix - Quelle est la différence?

Voici la clearfix trouvé dans Nathan Smith 960 grid css:

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

.clearfix:before,
.clearfix:after {
  content: '
/* 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;
}
20';
  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;
}

et voici le clearfix trouvé en Paul Irish HTML5 Boilerplate:

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

.clearfix:before, .clearfix:after {
    content: "
/* 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; }
20"; 
    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; }

Comme vous pouvez le voir, ils sont TRÈS similaire. Cependant, ils sont différents.

Quelqu'un a une idée dans ce?

Ce qui est mieux et pourquoi?

source d'informationauteur Johnny

  1. 5

    La seule différence est que 960 a l'intérieur de la .clearfix:before, .clearfix:after:

    visibility: hidden;
width: 0;

    Autre que cela, ils sont identiques.

    height: 0; overflow: hidden devrait supprimer la nécessité pour toutes les autres déclarations de cacher le pseudo-éléments.

    Ma théorie est que le HTML5 Boilerplate gens ont rigoureusement vérifié que ces deux déclarations ne sont pas requis pour n'importe quel navigateur, puis supprimé.

  2. 5

    Notre clearfix a été mis à jour à: 

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

    Les détails sont sur ce poste par Nicolas Gallagher