Übersicht

Die clear CSS Eigenschaft wird verwendet, um den Umfluss vorheriger Elemente zu beenden und das Element unter dem vorherigen zu platzieren. Somit entsteht neben dem zuvor umgebrochenem Element ein Freiraum (auch "Clearance" genannt).
Das Element wird durch clear soweit nach unten geschoben, sodass die obere Rahmenkante (top border edge) des Clear-Elements an der unteren Außenkante (bottom outer edge) des vorherigen Float-Elements liegt. Die Margins fallen in diesem Fall zusammen. Wenn das clearende Element ebenfalls ein gefloatetes Element ist, wird die obere Außenkante unter die untere Außenkante des vorherigen Elements geschoben und die Margins liegen aneinander und fallen nicht zusammen.

Hinweis: Falls es gewünscht ist, dass ein Element alle umbrechenden Elemente enthält, kann entweder der Container selbst als umbrechend markiert werden oder oder clear auf einem ersetzten ::after Pseudoelement angewendet werden.

#container:after { 
  content: "";
  display: block; 
  clear: both;
}

Initialwertnone
Anwendbar aufBlocklevel Elemente
VererbtNein
Medienvisuell
Berechneter Wertwie angegeben
Animationstypdiskret
Kanonische Reihenfolgedie eindeutige Reihenfolge definiert durch die formale Grammatik

Syntax

Formale Syntax: none | left | right | both | inline-start | inline-end
clear: none
clear: left
clear: right
clear: both

clear: inherit

Werte

none
Der Umfluss von vorherigen Elementen wird nicht beendet.
left
Der Umfluss von vorherigen Elementen wird auf der linken Seite beendet.
right
Der Umfluss von vorherigen Elementen wird auf der rechten Seite beendet.
both
Der Umfluss von vorherigen Elementen wird auf beiden Seiten beendet.
inherit
Der Wert des Elternelements wird geerbt.

Beispiele

Live-Beispiel ansehen

h1 { clear: none }
h2 { clear: right }

Spezifikationen

Spezifikation Status Anmerkung
CSS Level 2 (Revision 1)
Die Definition von 'clear' in dieser Spezifikation.
Empfehlung Keine signifikanten Änderungen, jedoch werden Details geklärt.
CSS Level 1
Die Definition von 'clear' in dieser Spezifikation.
Empfehlung Ursprüngliche Definition

Browser Kompatibilität

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid WebviewChrome für AndroidEdge MobileFirefox für AndroidOpera für AndroidSafari auf iOSSamsung Internet
Grundlegende UnterstützungChrome Vollständige Unterstützung 1Edge Vollständige Unterstützung 12Firefox Vollständige Unterstützung 1IE Vollständige Unterstützung 4Opera Vollständige Unterstützung 3.5Safari Vollständige Unterstützung 1WebView Android Vollständige Unterstützung 1Chrome Android Vollständige Unterstützung JaEdge Mobile Vollständige Unterstützung JaFirefox Android Vollständige Unterstützung 4Opera Android Vollständige Unterstützung 6Safari iOS Vollständige Unterstützung 1Samsung Internet Android Vollständige Unterstützung Ja
Flow-relative values inline-start and inline-end
Experimentell
Chrome Keine Unterstützung NeinEdge Keine Unterstützung NeinFirefox Vollständige Unterstützung 55IE Keine Unterstützung NeinOpera Keine Unterstützung NeinSafari Keine Unterstützung NeinWebView Android Keine Unterstützung NeinChrome Android Keine Unterstützung NeinEdge Mobile Keine Unterstützung NeinFirefox Android Vollständige Unterstützung 55Opera Android Keine Unterstützung NeinSafari iOS Keine Unterstützung NeinSamsung Internet Android Keine Unterstützung Nein

Legende

Vollständige Unterstützung  
Vollständige Unterstützung
Keine Unterstützung  
Keine Unterstützung
Experimentell. Das Verhalten kann sich zukünftig ändern.
Experimentell. Das Verhalten kann sich zukünftig ändern.

Siehe auch

Schlagwörter des Dokuments und Mitwirkende

Mitwirkende an dieser Seite: SJW, wbamberg, fscholz, Sebastianz, Michael2402
Zuletzt aktualisiert von: SJW,