960 grid clearfix vs HTML5 Boilerplate ist clearfix - Was ist der Unterschied?

960 grid clearfix vs HTML5 Boilerplate ist clearfix - Was ist der Unterschied?

Hier ist die clearfix gefunden in Nathan Smith 960 grid css:

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

und hier ist die clearfix gefunden bei Paul Irish-HTML5-Boilerplate:

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

Wie Sie sehen können, Sie sind SEHR ähnlich. Aber Sie sind anders.

Hat jemand einen Einblick in diese?

Welche ist besser und warum?

InformationsquelleAutor Johnny | 2011-06-29

  1. 5

    Der einzige Unterschied ist, dass die 960 hat dies innerhalb .clearfix:before, .clearfix:after:

    visibility: hidden;
width: 0;

    Andere als das, Sie sind identisch.

    height: 0; overflow: hidden sollte entfernen Sie die Notwendigkeit für irgendwelche anderen Erklärungen zu verstecken, die pseudo-Elemente.

    Meine Theorie ist, dass die HTML5 Boilerplate Leute haben, streng überprüft, dass die zwei zusätzlichen Angaben sind nicht erforderlich für einen browser ein, und dann entfernt Sie.

    InformationsquelleAutor thirtydot

  2. 5

    Unserer clearfix wurde aktualisiert: 

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

    Details werden auf dieser Beitrag von Nicolas Gallagher

    Es scheint mir, dass das :vor der Erklärung ist außerhalb des Bereichs eines clearfix. Es ist die tatsächliche angegebenen Zweck zu tun hat, da die Margen zusammenbrechen. Ich benutze :vor und :after erzeugten Inhalt genug, dass ich nicht wollen, dass Sie beliebig verwendet, wenn ich nicht brauchen kann. Ich will ein clearfix fix-float-clearing. Das ist alles. So könnte dies vereinfacht sich weiter zu: .clearfix:after { content: ""; display: table; clear: both; } .clearfix { zoom: 1; }
    :before fügt visuelle Konsistenz zwischen IE6/7 ist das Rendern von floats und anderen Browsern. Wenn Sie nicht möchten, dass, ja, es kann definitiv verkürzt werden.

    InformationsquelleAutor Divya Manian

Schreibe einen Kommentar