Clearfix 1.2.0

Nutze .velin-clearfix auf dem Elternelement, um gefloatete Kindelemente automatisch aufzuheben und ein Zusammenfallen des Containers zu verhindern. English: clearfix

Reifegrad: Dokumentiert als stable in VelinStyle 1.2.0. Design Intelligence (Plan / Review / Agent-Meta) ist separat und dort beta / foundation, wo es vermerkt ist.

Wann verwenden

Nutze den Clearfix-Helper, wenn Float-Layout bewusst eingesetzt wird und gefloatete Medien danach sauber abgeschlossen werden sollen.

Wann nicht verwenden

Nutze fuer neue Layouts bevorzugt Flexbox oder Grid; Clearfix ist fuer Float-Sonderfaelle gedacht.

Beispiel

Ohne Clearfix faellt der Elterncontainer zusammen. .velin-clearfix behebt das.

<div class="velin-clearfix">
  <button class="velin-btn velin-btn--primary float-start">Links floaten</button>
  <button class="velin-btn velin-btn--secondary velin-float-end">Rechts floaten</button>
</div>

Funktionsweise

Clearfix nutzt das Micro-Clearfix-Muster mit dem Pseudoelement ::after:

.velin-clearfix::after {
  content: "";
  display: block;
  clear: both;
}