float & clear

Zuletzt aktualisiert am 15. Februar 2026

float nimmt ein Element aus dem normalen Dokumentfluss und schiebt es nach links oder rechts. Der umgebende Textinhalt fließt dann um das Element herum. clear hebt den Float-Effekt auf und verhindert, dass ein Element neben einem gefloateten Element positioniert wird. Früher wurden Floats für komplette Seitenlayouts verwendet, aber heute sind Flexbox und Grid dafür die bessere Wahl. Der primäre Anwendungsfall für float ist der Textumfluss um Bilder.

Grundlagen

Wenn du ein Element mit float: left oder float: right versiehst, passiert Folgendes: Das Element wird aus dem normalen Fluss herausgenommen und an den linken bzw. rechten Rand seines Containers geschoben. Inline-Inhalte (Text, Bilder) fließen um das gefloatete Element herum. Block-Elemente verhalten sich so, als wäre das Float-Element nicht vorhanden.

Das größte Problem mit Floats: Der Container “sieht” seine gefloateten Kinder nicht und kollabiert auf die Höhe der nicht-gefloateten Inhalte. Früher hat man das mit dem sogenannten “clearfix-Hack” gelöst (ein Pseudo-Element mit clear: both). Heute gibt es dafür display: flow-root, das einen neuen Block Formatting Context erzeugt und den Container seine Kinder korrekt umschließen lässt.

Für Layouts solltest du Flexbox oder Grid verwenden. float ist heute nur noch für den klassischen Textumfluss relevant, z.B. wenn ein Bild in einem Fließtext stehen soll.

Syntax & Werte

float

clear

Beispiele

Bild mit Textumfluss (float: left)

Der klassische Anwendungsfall: Ein Bild steht links, der Text fließt rechts daneben.

.image {
  float: left;
  width: 100px;
  margin: 0 12px 8px 0; /* Abstand zum Text */
}

/* Text fließt automatisch um das Bild herum */

<div class="demo">
<div class="article">
  <div class="article-img">Bild</div>
  <p><strong>Textumfluss mit float: left.</strong> Der Text fließt rechts neben dem Bild weiter. Wenn der Text länger ist als das Bild, läuft er automatisch unter dem Bild weiter. Das ist genau das Verhalten, das man von Zeitungslayouts kennt.</p>
  <p>Dieser zweite Absatz fließt ebenfalls um das Bild, sofern er noch neben dem Bild beginnt. Sobald genug Text vorhanden ist, füllt er die gesamte Breite unterhalb des Bildes aus.</p>
</div>
</div>

Bild rechts mit Textumfluss (float: right)

Das gleiche Prinzip, aber das Bild steht rechts.

.image {
  float: right;
  width: 100px;
  margin: 0 0 8px 12px; /* Abstand zum Text (links) */
}

<div class="demo">
<div class="article-right">
  <div class="article-img-right">Bild</div>
  <p><strong>Textumfluss mit float: right.</strong> Hier fließt der Text links neben dem Bild. Das Bild wird an den rechten Rand des Containers geschoben. Der restliche Inhalt umfließt es von links.</p>
  <p>Wie bei float: left läuft der Text automatisch unter dem Bild weiter, sobald er den unteren Rand des Bildes erreicht hat.</p>
</div>
</div>

clear: both

Mit clear: both erzwingst du, dass ein Element unterhalb aller vorherigen Floats beginnt.

.left  { float: left; }
.right { float: right; }

.below-floats {
  clear: both; /* Beginnt unter allen Floats */
}

<div class="demo">
<div class="float-demo">
  <div class="float-left">float: left</div>
  <div class="float-right">float: right</div>
  <p class="clear-text">Dieser Text fließt zwischen den beiden Floats.</p>
  <p class="cleared">Dieser Absatz hat clear: both und beginnt unterhalb beider Floats.</p>
</div>
</div>

display: flow-root statt clearfix-Hack

Das häufigste Float-Problem: Der Container kollabiert, weil er seine gefloateten Kinder nicht umschließt. display: flow-root löst das elegant und modern.

/* Problem: Container kollabiert */
.broken {
  border: 2px solid red;
  /* Float-Kind ragt heraus */
}

/* Lösung: flow-root erzeugt neuen Formatting Context */
.fixed {
  display: flow-root;
  border: 2px solid green;
  /* Float-Kind wird korrekt umschlossen */
}

/* Veralteter clearfix-Hack (nicht mehr nötig):
.clearfix::after {
  content: "";
  display: block;
  clear: both;
} */

<div class="demo">
<div class="compare-row">
  <div class="compare-box">
    <div class="label" style="color: #dc2626;">Ohne flow-root</div>
    <div class="no-fix">
      <div class="float-el">Float</div>
      <span class="content-text">Container kollabiert.</span>
    </div>
  </div>
  <div class="compare-box">
    <div class="label" style="color: #059669;">Mit flow-root</div>
    <div class="with-fix">
      <div class="float-el">Float</div>
      <span class="content-text">Container umschließt das Float.</span>
    </div>
  </div>
</div>
</div>

Barrierefreiheit

Floats verschieben Elemente visuell, aber die Lesereihenfolge für Screenreader folgt weiterhin der DOM-Reihenfolge. Das ist weniger problematisch als bei Grid oder Flexbox, kann aber bei komplexeren Float-Layouts zu verwirrenden Lesereihenfolgen führen.

Beispiel: Du hast ein float: left Bild und einen langen Text. Visuell fließt der Text rechts neben dem Bild und dann darunter weiter. Ein Screenreader liest aber: Bild, dann den gesamten Text in einem Durchgang. Wenn der Text-Absatz nach dem Bild beginnt, ist die Reihenfolge natürlich. Wenn das Bild aber mitten im Text steht, kann es zu unlogischen Sprüngen kommen.

Moderne Alternativen sind besser: Flexbox und Grid geben dir mehr Kontrolle über die Lesereihenfolge, auch wenn du dabei ebenfalls auf die DOM-Reihenfolge achten musst. Floats sind heute hauptsächlich für den klassischen Bild-Text-Umfluss relevant, wo die Barrierefreiheit meist unproblematisch ist.

Häufige Fehler

• Floats für Layouts verwenden: Floats waren nie für Seitenlayouts gedacht, wurden aber jahrelang dafür missbraucht. Für Layouts solltest du heute Flexbox oder Grid verwenden. Floats sind nur noch für den Textumfluss um Bilder sinnvoll.
• Container kollabiert (Float-Kinder werden nicht umschlossen): Ein Container hat keine Ahnung von seinen gefloateten Kindern und kollabiert auf die Höhe der nicht-gefloateten Inhalte. Verwende display: flow-root auf dem Container, um das Problem zu lösen.
• clear vergessen nach einem Float: Wenn nach einem Float kein clear kommt, fließen nachfolgende Elemente weiterhin neben dem Float. Verwende clear: both auf dem nächsten Element, das die volle Breite benötigt.
• Float und Margin zusammen verwenden: Gefloatete Elemente können mit vertikalen Margins unerwartete Ergebnisse liefern. Margins kollabieren nicht mit Float-Elementen, was zu doppelten Abständen führen kann. Setze Margins bewusst und teste das Ergebnis.
• float auf Flex- oder Grid-Items: float hat keine Wirkung auf Flex- oder Grid-Items. Wenn ein Element innerhalb eines Flex- oder Grid-Containers steht, wird float ignoriert. Verwende stattdessen die Ausrichtungs-Eigenschaften von Flexbox oder Grid.

Browser-Kompatibilität

float und clear werden seit Jahrzehnten von allen Browsern unterstützt. Die logischen Werte inline-start und inline-end haben seit 2023 breiten Support.

Email-Kompatibilität

float wird in HTML-Emails überraschend gut unterstützt, da es eine ältere CSS-Eigenschaft ist. Für einfache Text-Bild-Layouts ist es eine zuverlässige Option.

Verwandte Eigenschaften