Ist CSS float veraltet?

Neulich gab es eine interessante Unterhaltung bei der Arbeit: Sollen wir die CSS-float-Eigenschaft verwenden, jetzt wo wir CSS Grid und Flexbox haben?

Die kurze Antwort

Nein! Naja, meistens. Ich würde es heute nur noch zum Umbrechen von Text um Bilder herum verwenden, und ich würde float für Layouts gänzlich vermeiden.

Die längere, nervigere Antwort

Bevor es Flexbox und Grid gab, mussten wir die CSS-float-Eigenschaft verwenden, um Grids und Layouts zu erstellen. Tatsächlich war es das Erste, was ich über Webdesign gelernt habe. An einem heißen Sommernachmittag schlug ich ein Exemplar von Designing with Web Standards von Jeffrey Zeldman auf und verschob dann einen winzigen roten Div mit float: right. Es war magisch. Es steckte Macht in float.

Es war so einfach, etwas auf dem Bildschirm zu bewegen, dass ich mich frage, wie viele Designer sich einfach deshalb in das Web verliebt haben, weil es so einfach ist, Dinge so zu bewegen.

Aber die Verwendung von float zum Erstellen komplexer Layouts war schon immer ein Hack: Es war eigentlich nur dafür gedacht, Text um ein Bild fließen zu lassen.

img {
  width: 150px;
  float: left;
}

Die Probleme mit float beginnen, wenn wir versuchen, riesige Layouts und zeitschriftenähnliche Grids zu erstellen. Aber das mussten wir tun, da es damals keine Alternativen gab, wie wir sie heute haben.

Ein Problem mit der float-Eigenschaft war, dass man geflotete Elemente mit etwas namens clearfix umhüllen musste, das so aussah

<div class="clearfix">
  <div class="float-left">Column</div>
  <div class="float-left">Column</div>
  <div class="float-left">Column</div>
</div>

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

Jay Hoffman beschrieb den clearfix-Hack vor einiger Zeit

Der clearfix, für diejenigen, die ihn nicht kennen, ist ein CSS-Hack, der einen hartnäckigen Fehler behebt, der auftritt, wenn zwei geflotete Elemente nebeneinander gestapelt sind. Wenn Elemente auf diese Weise ausgerichtet sind, hat der übergeordnete Container eine Höhe von 0, und das kann leicht verheerende Auswirkungen auf ein Layout haben. Alles, was Sie vielleicht tun möchten, ist, eine Seitenleiste links von Ihrem Hauptinhaltsblock zu positionieren, aber das Ergebnis wären zwei Elemente, die sich überlappen und ineinander kollabieren. Um die Sache noch komplizierter zu machen, ist der Fehler browserübergreifend inkonsistent. Der clearfix wurde erfunden, um all das zu lösen.

Die Dinge begannen sich danach langsam zu ändern. Im Jahr 2017 erklärte Rachel Andrew, wie Browser das clearfix-Problem ohne jegliche Hacks behandeln können. Alles, was wir brauchen, ist der folgende CSS-Code, um die gleiche Korrektur vorzunehmen

.container {
  display: flow-root;
}

Das Seltsame ist, dass ich bis etwa drei Minuten vor dem Tippen dieser Zeile nicht wusste, dass der Wert flow-root existiert. Aber ich denke, das verteidigt irgendwie das Argument, das ich hier machen werde: mit CSS Grid und Flexbox brauchen wir float eigentlich nicht mehr. Die Eigenschaft wurde wirklich entwickelt, um eine Sache zu tun: Text um Bilder fließen zu lassen. Aber jetzt haben wir mit Grid und Flexbox wunderbare Kräfte, die die schwere Arbeit für echte Layouts erledigen können.

---

Zurück zu der Diskussion, die ich bei der Arbeit hatte. Einige Leute sagten, wir sollten zurückgehen und alle Instanzen von float in unserer Codebasis löschen, weil es alter Code ist und wir ihn leicht durch Flexbox oder Grid ersetzen können. Aber hier würde ich sagen: "Hallo! Halt mal kurz an." Ich glaube nicht, dass die float-Eigenschaft an einigen Stellen in unserer Codebasis so viel Schaden anrichtet – das ist kein radioaktiver Code, der Probleme verursacht.

Sollten wir also CSS float für etwas anderes als das Umbrechen von Text um Text verwenden? Nein. Aber sollen wir alle sofort das Web von CSS-Float-Deklarationen reinigen, weil es nicht rein und nicht der "richtige" Weg ist, die Dinge zu tun? Nein, nochmal nein.

Das Nette am Web ist, dass alter Code keine Dinge kaputt machen sollte. Fragen Sie einfach Chris. Eine Website, die nicht die schicksten CSS-Eigenschaften oder die coolsten Tricks verwendet, ist nicht nutzlos oder schlecht. Wir haben float einfach durch Alternativen ersetzt, die besser sind. Ich denke, es ist hier eine gute Lektion, dass diese CSS-Eigenschaften wahrscheinlich für immer Bestand haben werden, weil sie immer noch anwendbare Anwendungsfälle im modernen Webdesign haben.

Und das ist in Ordnung.