Wie kann ich Floats in modernem CSS ohne zusätzliches Markup effizient löschen?

Best Practices zum Löschen von Floats in modernem CSS

Im Bereich CSS war das Clearing von Floats eine anhaltende Herausforderung, wobei verschiedene Techniken aufkamen im Laufe der Jahre. Während die Verwendung von
> Obwohl dies ein gängiger Ansatz ist, führt er unnötiges HTML-Markup ein. Modernes CSS bietet elegantere und effizientere Lösungen für dieses Problem.

Pseudoelement-Ansatz:

Im Jahr 2014 besteht die bevorzugte Technik darin, Pseudoelemente zu verwenden, um ein zu erstellen klarfix. Dazu gehört das Hinzufügen der folgenden Stile zum übergeordneten Container der schwebenden Elemente:

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

.cf:after {
  clear: both;
}

Diese Methode ist in allen modernen Browsern effektiv und macht zusätzliche HTML-Elemente überflüssig.

Overflow-Eigenschaft:

Eine weitere browserübergreifende Lösung besteht darin, die Overflow-Eigenschaft des übergeordneten Containers auf „hidden“ oder „auto“ zu setzen. Dadurch werden die Schwimmer im Container gelöscht, ohne dass zusätzliches Markup erforderlich ist:

.container {
  overflow: hidden;
}

Micro Clearfix:

Für einen noch minimalistischeren Ansatz: Nicholas Gallagher hat eine Micro-Clearfix-Technik vorgeschlagen:

.cf {
  zoom: 1;
}
.cf:before,
.cf:after {
  display: table;
}

.cf:after {
  clear: both;
}

Diese Technik kombiniert die Überlaufeigenschaft mit Pseudoelementen, um das gleiche Ergebnis wie Clearfix zu erzielen Technik, die bereits erwähnt wurde.

JavaScript-Hacks vermeiden:

Es wird empfohlen, die Verwendung von JavaScript-Hacks für diesen Zweck zu vermeiden. JavaScript kann in verschiedenen Browsern unterschiedlich stark unterstützt werden und ist möglicherweise nicht immer verfügbar oder aktiviert, wenn es benötigt wird. Daher ist es zuverlässiger, CSS-basierte Lösungen für die browserübergreifende Kompatibilität zu verwenden.

Das obige ist der detaillierte Inhalt vonWie kann ich Floats in modernem CSS ohne zusätzliches Markup effizient löschen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!