From 4b1a9203c547c019fc5398082ae19a3f3d4c3efe Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:41:15 -0500 Subject: initial commit --- files/de/web/css/clear/index.html | 250 ++++++++++++++++++++++++++++++++++++++ 1 file changed, 250 insertions(+) create mode 100644 files/de/web/css/clear/index.html (limited to 'files/de/web/css/clear/index.html') diff --git a/files/de/web/css/clear/index.html b/files/de/web/css/clear/index.html new file mode 100644 index 0000000000..9d2be4ab3c --- /dev/null +++ b/files/de/web/css/clear/index.html @@ -0,0 +1,250 @@ +--- +title: clear +slug: Web/CSS/clear +tags: + - CSS + - CSS Eigenschaft + - CSS Positionierung + - Layout + - Referenz +translation_of: Web/CSS/clear +--- +
{{CSSRef}}
+ +

Die CSS Eigenschaft clear legt fest, ob ein Element unter einem fließenden (float) Element verschoben werden muss, die ihm vorausgehen. Die clear Eigenschaft gilt für fließende und nicht fließenden Elemente.

+ +
{{EmbedInteractiveExample("pages/css/clear.html")}}
+ + + +

Wenn sie auf nicht fließende Blöcke angewendet wird, verschiebt sie den Rahmen (border edge) des Elements nach unten, bis sie unter den Rand (margin edge) aller relevanten fließende Elemente liegt. Der obere Rand (margin) des nicht fließenden Blocks kollabiert.

+ +

Vertikale Ränder (margins) zwischen zwei fließenden Elementen hingegen kollabieren nicht. Wenn sie auf fließenden Elemente angewendet werden, wird der Rand des unteren Elements unter den Rand aller relevanten fließenden Elementen verschoben. Dies wirkt sich auf die Position späterer fließenden Elementen aus, da spätere fließende Elemente nicht höher positioniert werden können als frühere.

+ +

Die relevanen fließenden Elemente, deren Fließeigenschaft beendet werden soll, sind die früheren fließenden Elemente mit der selben Blockformatierungskontexts .

+ +
+

Hinweis: Wenn ein Element nur fließenden (float) Elemente enthält, kollabiert seine Höhe zu null. Wenn Sie möchten, dass es immer in der Lage ist, seine Größe zu ändern, so dass es in seinem Inneren schwebende Elemente enthält, müssen Sie das float für seine Kinder selbst beenden. Dies wird clearfix genannt, und eine Weg, besteht darin, ein clear zu einem ersetzten {{cssxref("::after")}} Pseudoelement hinzuzufügen.

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

Syntax

+ +

+
+
/* Keyword values */
+clear: none;
+clear: left;
+clear: right;
+clear: both;
+clear: inline-start;
+clear: inline-end;
+
+/* Global values */
+clear: inherit;
+clear: initial;
+clear: unset;
+

+
+
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.

+ 
inline-start

+ 
Beendet die Fließeigenschaft des Elementes, das nach unten an den Startrand eines seines enthaltenden Blocks verschoben wird. Wenn die Textrichtung ltr (von links nach rechts) ist, dann wird es linksseitig sein. Falls die Textrichtung rtl (von rechts nach links) ist, dann wird es rechtsseitig sein.

+ 
inline-end

+ 
Beendet die Fließeigenschaft des Elementes, das nach unten an den Endrand eines seines enthaltenden Blocks verschoben wird. Wenn die Textrichtung ltr (von links nach rechts) ist, dann wird es linksseitig sein. Falls die Textrichtung rtl (von rechts nach links) ist, dann wird es rechtsseitig sein.

+ 
inherit

+ 
Der Wert des Elternelements wird geerbt.

+

+
+
Formale Definition

+
+
{{cssinfo}}

+
+
Formale Syntax

+
+
{{csssyntax}}

+
+
Beispiele

+
+
clear: left

+
+
HTML

+
+
<div class="wrapper">
+  <p class="black">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus sit amet diam. Duis mattis varius dui. Suspendisse eget dolor.</p>
+  <p class="red">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
+  <p class="left">This paragraph clears left.</p>
+</div>
+

+
+
CSS

+
+
.wrapper{
+  border:1px solid black;
+  padding:10px;
+}
+.left {
+  border: 1px solid black;
+  clear: left;
+}
+.black {
+  float: left;
+  margin: 0;
+  background-color: black;
+  color: #fff;
+  width: 20%;
+}
+.red {
+  float: left;
+  margin: 0;
+  background-color: pink;
+  width:20%;
+}
+p {
+  width: 50%;
+}
+

+
+
Ergebnis

+
+
{{ EmbedLiveSample('clear-left','100%','250') }}

+
+
clear: right

+
+
HTML

+
+
<div class="wrapper">
+  <p class="black">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus sit amet diam. Duis mattis varius dui. Suspendisse eget dolor.</p>
+  <p class="red">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
+  <p class="right">This paragraph clears right.</p>
+</div>
+

+
+
CSS

+
+
.wrapper{
+  border:1px solid black;
+  padding:10px;
+}
+.right {
+  border: 1px solid black;
+  clear: right;
+}
+.black {
+  float: right;
+  margin: 0;
+  background-color: black;
+  color: #fff;
+  width:20%;
+}
+.red {
+  float: right;
+  margin: 0;
+  background-color: pink;
+  width:20%;
+}
+p {
+  width: 50%;
+}

+
+
Ergebnis

+
+
{{ EmbedLiveSample('clear-right','100%','250') }}

+
+
clear: both

+
+
HTML

+
+
<div class="wrapper">
+  <p class="black">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus sit amet diam. Duis mattis varius dui. Suspendisse eget dolor. Fusce pulvinar lacus ac dui.</p>
+  <p class="red">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus sit amet diam. Duis mattis varius dui. Suspendisse eget dolor.</p>
+  <p class="both">This paragraph clears both.</p>
+</div>
+

+
+
CSS

+
+
.wrapper{
+  border:1px solid black;
+  padding:10px;
+}
+.both {
+  border: 1px solid black;
+  clear: both;
+}
+.black {
+  float: left;
+  margin: 0;
+  background-color: black;
+  color: #fff;
+  width:20%;
+}
+.red {
+  float: right;
+  margin: 0;
+  background-color: pink;
+  width:20%;
+}
+p {
+  width: 45%;
+}

+
+
Ergebnis

+
+
{{ EmbedLiveSample('clear-both','100%','300') }}

+
+
Spezifikationen

+
+
+ 
+  
+   
+   
+   
+  
+ 
+ 
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+ 
+
SpezifikationStatusKommentar
{{SpecName('CSS Logical Properties', '#float-clear', 'float and clear')}}{{Spec2('CSS Logical Properties')}}Die Werte inline-start und inline-end hinzugefügt.
{{SpecName('CSS2.1', 'visuren.html#flow-control', 'clear')}}{{Spec2('CSS2.1')}}Keine signifikanten Änderungen, jedoch werden Details geklärt.
{{SpecName('CSS1', '#clear', 'clear')}}{{Spec2('CSS1')}}Ursprüngliche Definition

+
+
Browser Kompatibilität

+
+
+
+
{{Compat("css.properties.clear")}}

+
+
Siehe auch

+
+
-- 
cgit v1.2.3-54-g00ecf