clear

Ü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;
}

Initialwert	`none`
Anwendbar auf	Blocklevel Elemente
Vererbt	Nein
Medien	visuell
Berechneter Wert	wie angegeben
Animationstyp	diskret
Kanonische Reihenfolge	die 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

	Desktop						Mobile
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	Android Webview	Chrome für Android	Firefox für Android	Opera für Android	Safari auf iOS	Samsung Internet
`clear`	Chrome Vollständige Unterstützung 1	Edge Vollständige Unterstützung 12	Firefox Vollständige Unterstützung 1	IE Vollständige Unterstützung 4	Opera Vollständige Unterstützung 3.5	Safari Vollständige Unterstützung 1	WebView Android Vollständige Unterstützung 1	Chrome Android Vollständige Unterstützung 18	Firefox Android Vollständige Unterstützung 4	Opera Android Vollständige Unterstützung 10.1	Safari iOS Vollständige Unterstützung 1	Samsung Internet Android Vollständige Unterstützung Ja
Flow-relative values `inline-start` and `inline-end` Experimentell	Chrome Keine Unterstützung Nein	Edge Keine Unterstützung Nein	Firefox Vollständige Unterstützung 55	IE Keine Unterstützung Nein	Opera Keine Unterstützung Nein	Safari Keine Unterstützung Nein	WebView Android Keine Unterstützung Nein	Chrome Android Keine Unterstützung Nein	Firefox Android Vollständige Unterstützung 55	Opera Android Keine Unterstützung Nein	Safari iOS Keine Unterstützung Nein	Samsung 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

Boxmodell