MichiPedia

Clearfix

• Floatende Elemente verlassen den Standard-Dokumentfluss einer Website. Andere, nicht floatende, Elemente verhalten sich daher so, als würde das gefloatete Element nicht existieren
• Beispiel: Anwendung von float in Verbindung mit einem Bild (img) berechnet die Höhe des Containers falsch. Er schließt die Höhe des Images nicht mit ein und das Bild ragt über den Container hinaus

Problem 1: Kollabierendes Elternelement

• Wenn ein Eltern-Element floatende Kind-Elemente enthält, schrumpft das Eltern-Element auf die Höhe des letzten nicht floatenden Kind-Elements zusammen.
• Boxen, die floaten, verlassen den Dokumentfluss. Der Container weiß nicht mehr, dass diese Boxen existieren

Problem 2: Hintereinander liegende Elemente

• Elemente sind plötzlich nicht mehr sichtbar. Wenn ein nicht floatendes Block-Element auf ein nach links floatendes Element folgt, rutscht es hinter das floatende Element. Das hängt damit zusammen, das dass sich beide Elemente oben links in ihrem Elternelement positionieren, da das zweite Element das erste floatende Element ignoriert.

Lösungen

• alle Elemente zu floaten: so erkennen sie sich gegenseitig und verhalten sich entsprechend
  • wird nicht angewendet. Daher
• clear-Eigenschaft
  • clear:left; hebt vorherige float:left;-Befehle auf
  • clear:right; hebt vorherige float:right;-Angaben auf
  • Aufhebung aller floats: clear:both;

CSS-Clearfix

• die Klasse clearfix wird dem Elternelement gegeben, dass alle floats beachten soll
• es muss ein nachfolgendes Element vorhanden sein, das vorherige Floats aufhebt
  • in der Praxis häufig nicht der Fall, beispielsweise wenn in einem Container-Element alle Elemente gefloatet werden

Option 1:

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


Option 2: (Unterschied ??)

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

.clearfix::after {
  clear: both;
}

SASS Clearfix

• display: flow-root verändert das Element zu einem Block-Container, der einen neuen sog. Block-Formatting-Context (BFC) erstellt. Elemente innerhalb des Containers werden anschließend nicht mehr von Floats beeinflusst, die sich außerhalb des BFC befinden, und umgekehrt
• vermeidet den CSS Clearfix-Hack

.container {
  display: flow-root;
}