Wie löscht man CSS-Floats im Jahr 2014 und darüber hinaus am besten?

CSS-Floats löschen: Best Practices

Die Frage des effektiven Löschens von CSS-Floats hat sich im Laufe der Zeit weiterentwickelt, wobei verschiedene Techniken entstanden sind. Obwohl die Verwendung von
eine gängige Praxis ist, entspricht sie möglicherweise nicht den aktuellen Best Practices.

Moderner Ansatz:

Im Jahr 2014 wurde eine Clearfix-Technik verwendet Pseudoelemente werden empfohlen. Bei dieser Methode wird das folgende CSS angewendet:

.cf:before,
.cf:after {
    content: " ";
    display: table;
}

.cf:after {
    clear: both;
}

Diese Technik funktioniert in modernen Browsern. Zur weiteren Optimierung kann Micro Clearfix nach Nicholas Gallagher verwendet werden:

.cf {
    *zoom: 1;
}

Originallösung:

Eine alternative Lösung, die von denen bevorzugt wird, die Unnötiges vermeiden möchten Markup besteht darin, overflow:hidden oder overflow:auto für das übergeordnete Element zu verwenden. Dadurch werden die Floats effektiv browserübergreifend gelöscht, ohne dass zusätzliche Elemente erforderlich sind.

Zusammenfassung:

Im Jahr 2014 stellt die Clearfix-Technik mit Pseudoelementen die empfohlene Methode zum Löschen von Floats dar browserunabhängig. Die Überlaufmethode bleibt jedoch eine praktikable Option für diejenigen, die Wert auf die Minimierung des Aufschlags legen.

Das obige ist der detaillierte Inhalt vonWie löscht man CSS-Floats im Jahr 2014 und darüber hinaus am besten?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!