Wie man den Float löscht (Clearfix)

Lernen Sie, wie Sie die clearfix-Technik verwenden, um den Float zu löschen.

clearfix-Technik

Wenn ein Element höher ist als das umschließende Element und es fließt, wird es aus seinem Behälter herausragen.

Dann können wir overflow: auto; zu dem umschließenden Element hinzufügen, um dieses Problem zu lösen:

Beispiel

.clearfix {
  overflow: auto;
}

Versuchen Sie es selbst

Solange Sie die Außen- und Innenabstände kontrollieren können,overflow: auto; Der Effekt der glatten Flüssigkeit ist gut (sonst könnten Sie möglicherweise die Scrollleiste sehen).

Allerdings ist die neue, moderne clearfix-Technik sicherer zu verwenden und die meisten Webseiten verwenden den folgenden Code:

Beispiel

.clearfix::after {
  content: "";
  clear: both;
  display: table;
}

Versuchen Sie es selbst

Verwandte Seiten

Tutorials:CSS-Fließen