Herkunft :
.ClearFix: Nach {
Sichtbarkeit: versteckt;
Anzeige: Block;
Schriftgröße: 0;
Inhalt: " ";
klar: beides;
Höhe: 0;
}
.ClearFix {Anzeige: Inline-table;
/* Versteckt sich vor IE-MAC */
* html .clearFix {Höhe: 1%;
.ClearFix {Anzeige: Block;
/ * Ende ausblenden von IE-MAC *//
Illustrieren :
* Wenden Sie den ersten Deklarationsblock auf die meisten Standard-konformen Browser an, um einen unsichtbaren Nullblock zu erstellen, um das Zielelement für das Zielelement zu klären .
*Das zweite Element wendet das Inline-Table-Anzeigeattribut für ClearFix nur für IE/Mac an.
* Verwenden Sie* / ausblenden Sie einige Regeln vor IE / Mac:
* Höhe: 1% wird verwendet, um Haslayout unter IE6 auszulösen.
*Die Blockanzeigeneigenschaften zu IE außerhalb des IE/Mac erneut anwenden.
*Die letzte Zeile wird verwendet, um den Hack für IE/Mac zu beenden.
Da diese Methode auf Browser ausgerichtet ist, die zu Geschichte geworden sind (insbesondere IE5 auf Mac) oder auf dem Weg zu Standards sind, ist diese Methode nicht mehr so progressiv wie die Zeit.
Nachdem Sie die Unterstützung für IE/MAC weggeworfen haben, ist eine neue Methode zum Löschen von Schwimmern:
/ * neuer ClearFix */
.ClearFix: Nach {
Sichtbarkeit: versteckt;
Anzeige: Block;
Schriftgröße: 0;
Inhalt: " ";
klar: beides;
Höhe: 0;
}
* html .clearFix {zoom: 1;} / * IE6 * /
*: Erstkind+Html .ClearFix {Zoom: 1;
Illustrieren :
IE6 und IE7 unterstützen weder die: Nach der Pseudoklasse, also werden die nächsten beiden benötigt, um den Haslayout von IE6/7 auszulösen, um den Schwimmer zu löschen. Glücklicherweise unterstützt IE8: nach Pseudoklasse. Daher wird nur der Hack für IE6/7 benötigt.