Lädt...

CSS Float und Clear

Z-index stapelte überlappende Ebenen. float und clear lösen ein anderes klassisches Problem: Text an der Seite eines Bildes oder Hinweiskastens umfließen lassen — und entscheiden, wann der nächste Block unter diese Floats fallen muss. Lerne das Umfluss-Muster — Seitenraster bleiben Flexbox und Grid.

Ein Float- und Clear-Werkzeugkasten

📊 Float und Clear auf einen Blick

Werkzeug	Alltagstaugliche Aufgabe
`float: left`	Zieht die Box nach links; folgender Inhalt kann rechts umfließen
`float: right`	Zieht die Box nach rechts; folgender Inhalt kann links umfließen
`float: none`	Standard — kein Float-Verhalten
`clear: left`	Nächster Block setzt sich nicht neben linke Floats
`clear: right`	Nächster Block setzt sich nicht neben rechte Floats
`clear: both`	Nächster Block fällt unter Floats auf beiden Seiten
Clearfix	Eltern wächst, um gefloatete Kinder zu umschließen (z. B. `overflow` oder `display: flow-root`)

Gefloatete Boxen verlassen den normalen Fluss auf besondere Weise: Nachbarn können daneben umfließen, und ein Elternteil kann auf Höhe null kollabieren, wenn es nur Floats enthält. Genau deshalb gibt es Clearfix.

Bild floaten, Geschichte umfließen

Zieh eine Figur nach links und lass Absätze daneben fließen. Gib dem Bild eine Breite, damit der Umfluss absichtlich wirkt — nicht zufällig.

Bild float left

css

.article img.pull-left {
float: left;
width: 40%;
max-width: 220px;
margin: 0 1rem 0.75rem 0;
}

Hinweis die andere Seite floaten

Ein kurzer Tipp oder ein Zitat kann rechts sitzen, während Fließtext links umfließt. Halte Abstände, damit Text die Box nicht berührt.

Hinweis float right

css

.tip {
float: right;
width: 38%;
margin: 0 0 1rem 1rem;
padding: 0.75rem 1rem;
background: #f5f7ff;
border-left: 3px solid #0b5fff;
}

Clear — nicht mehr am Float kleben

Wenn eine Überschrift, Fußzeile oder der nächste Abschnitt unter Floats neu beginnen muss, nutze clear. clear: both ist das alltägliche „unter alles Gefloatete fallen“.

Clear both nach Floats

css

.article-footer {
clear: both;
padding-top: 1rem;
border-top: 1px solid #eee;
}

Kollabierte Eltern brauchen Clearfix

Enthält ein Elternteil nur gefloatete Kinder, kann die Höhe kollabieren und Hintergründe/Rahmen wirken kaputt. Ruhige Lösung: overflow: auto (oder hidden) am Elternteil — oder modern display: flow-root.

Overflow-Clearfix

css

.media-row {
overflow: auto;
padding: 1rem;
border: 1px solid #e5e5e5;
}

.media-row img {
float: left;
margin-right: 1rem;
}

flow-root — ein klarer Containing Block

display: flow-root erzeugt einen neuen Block Formatting Context, sodass der Elternteil seine Floats einschließt — ohne Overflow-Nebenwirkungen zu borgen.

flow-root-Clearfix

css

.card-with-float {
display: flow-root;
padding: 1rem;
background: #fff;
border: 1px solid #ddd;
}

Eine ruhige Float-Gewohnheit

Nutze float für Text-um-Medien und kleine Umfluss-Tricks. Bevorzuge Flexbox oder Grid für Navigation, Seitenspalten und Kartenraster. Merke: position platziert; z-index stapelt; float umfließt.

Medien-plus-Text-Muster

css

.feature {
display: flow-root;
}

.feature__media {
float: left;
width: 42%;
margin: 0 1rem 0.5rem 0;
}

.feature__copy {
/* wraps beside the media, then clears naturally as needed */
}

Selbst ausprobieren

Floate ein Bild links in einem absatzreichen Artikel und justiere Abstände.
Floate eine Tip-Box rechts und lass Fließtext daneben umfließen.
Setze clear: both auf eine Fußzeile, die neben Floats hochgerutscht ist.
Repariere ein kollabiertes Elternteil mit overflow: auto oder display: flow-root.
Schreibe einen Satz: Wann wählst du Flex statt float?

Typische Fehler

Ganze Seitenlayouts mit float statt Flex/Grid bauen
clear vergessen, sodass Fußzeilen neben Bildern klettern
Kollabierte Eltern um gefloatete Kinder ignorieren
float wie position oder wie z-index behandeln
clear nur auf die gefloatete Box setzen, obwohl der folgende Block gemeint war

Zusammenfassung

float zieht eine Box zur Seite, damit folgender Inhalt umfließen kann
clear zwingt spätere Blöcke unter Floats
Eltern nur mit Floats können kollabieren — Clearfix mit overflow oder flow-root
Float für Umfluss-Muster behalten; Flex/Grid für Seitenstruktur
Platzierung und Stapelung bleiben eigene Werkzeuge (position, z-index)

🧠 Testen Sie Ihr Wissen

Bereit zum Start

Testen Sie Ihr Wissen

Fordern Sie sich mit diesem interaktiven Quiz heraus und sehen Sie, wie gut Sie das Thema verstehen

❓

Fragen

🎯

70%

Zum Bestehen

♾️

∞

Zeit

🔄

∞

Versuche

📝 Anweisungen

Lesen Sie jede Frage sorgfältig
Wählen Sie die beste Antwort für jede Frage
Sie können das Quiz so oft wiederholen, wie Sie möchten
Ihr Fortschritt wird oben angezeigt

Sprache