CSS-Layout - clear und clearfix

clear Attribut

clear Das Attribut legt fest, welche Elemente nebeneinander mit dem gelöschten Element floaten können und auf welcher Seite.

clear Das Attribut kann einen der folgenden Werte haben:

  • none - Es ist erlaubt, dass auf beiden Seiten float Elemente vorhanden sind. Standardwert
  • left - Es ist rechts nicht erlaubt, float Elemente zu haben
  • right - Es ist links nicht erlaubt, float Elemente zu haben
  • both - Es ist links oder rechts nicht erlaubt, float Elemente zu haben
  • inherit - Das Element übernimmt den Wert von clear des Elternelements

verwendet clear Die häufigste Verwendung des Attributs ist, wenn es auf dem Element verwendet wird float Nach dem Attribut.

Bei der Entfernung von Floats sollte eine Übereinstimmung zwischen Entfernung und Float hergestellt werden: Wenn ein Element in den linken Bereich floatet, sollte der linke Bereich entfernt werden. Ihre float Elemente werden weiterhin floaten, aber die entfernten Elemente werden unter ihnen angezeigt.

Das folgende Beispiel löst den Linkskant des Floats auf. Das bedeutet, dass keine float Elemente auf der linken Seite des (div) erlaubt sind:

Beispiel

div {
  clear: left;
}

Probieren Sie es selbst aus

clearfix Hack

Wenn ein Element höher ist als das, das es enthält, und es fließt, wird es „überfließen“ in den Bereich außerhalb seines Behälters:

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

Beispiel

.clearfix {
  overflow: auto;
}

Probieren Sie es selbst aus

Wenn Sie die Außen- und Innenabstände steuern können (sonst könnten Sie möglicherweise Rollbalken sehen), funktioniert overflow: auto clearfix gut. Aber die neue moderne clearfix Hack-Technik ist sicherer zu verwenden, und der folgende Code wird auf den meisten Websites angewendet:

Beispiel

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

Probieren Sie es selbst aus

Sie werden in den folgenden Kapiteln lernen ::after Pseudo-Elemente.