Klare schwebende neue Wörter

Herkunft :

.clearfix:after {
Sichtbarkeit: verborgen;
Anzeige: Block;
Schriftgröße: 0;
Inhalt: " ";
klar: beides;
Höhe: 0;
}
.clearfix { display: inline-table;
/* Versteckt sich vor IE-Mac */
* html .clearfix { Höhe: 1 % }
.clearfix { display: block }
/* Ausblenden vor IE-Mac beenden */

veranschaulichen :

• *Wendet den ersten Deklarationsblock auf die meisten standardkonformen Browser an, mit dem Ziel, einen unsichtbaren Block mit leerem Inhalt zu erstellen, der Floats für das Zielelement löscht .
• *Das zweite Element wendet das Inline-Table-Anzeigeattribut für Clearfix an, nur für IE/Mac.
• *Ausnutzen* / Einige Regeln vor IE/Mac verbergen:
• * height:1% wird verwendet, um Haslayout unter IE6 auszulösen.
• *Wenden Sie das Blockanzeigeattribut erneut auf einen anderen IE als IE/Mac an.
• *Die letzte Zeile wird verwendet, um den Hack für IE/Mac zu beenden.

Da die von dieser Methode anvisierten Browser der Vergangenheit angehören (insbesondere IE5 unter Mac) oder auf dem Weg zum Standard sind, ist diese Methode nicht mehr so ​​aktuell.

Nachdem die Unterstützung für IE/Mac eingestellt wurde, gibt es eine neue Methode zum Löschen von Floats:

/* neuer Clearfix */
.clearfix:after {
Sichtbarkeit: verborgen;
Anzeige: Block;
Schriftgröße: 0;
Inhalt: " ";
klar: beides;
Höhe: 0;
}
* html .clearfix { zoom: 1; } /* IE6 */
*:first-child+html .clearfix { zoom: 1 } /* IE7 */

veranschaulichen :

Weder IE6 noch IE7 unterstützt die :after-Pseudoklasse, daher werden die nächsten beiden benötigt, um das Haslayout von IE6/7 auszulösen, um Floats zu löschen. Glücklicherweise unterstützt IE8 die Pseudoklasse :after. Es werden also nur Hacks für IE6/7 benötigt.