path: root/files/de/web/css/clear/index.html

---
title: clear
slug: Web/CSS/clear
tags:
  - CSS
  - CSS Eigenschaft
  - CSS Positionierung
  - Layout
  - Referenz
translation_of: Web/CSS/clear
---
<div>{{CSSRef}}</div>

<p>Die <a href="/de/docs/Web/CSS">CSS</a> Eigenschaft <strong><code>clear</code></strong> legt fest, ob ein Element unter einem fließenden (<a href="/de/docs/Web/CSS/float">float</a>) Element verschoben werden muss, die ihm vorausgehen. Die <code>clear</code> Eigenschaft gilt für fließende und nicht fließenden Elemente.</p>

<div>{{EmbedInteractiveExample("pages/css/clear.html")}}</div>

<p class="hidden">Die Quelle für dieses interaktive Beispiel ist in einem GitHub-Repository gespeichert. Wenn Sie zum Projekt der interaktiven Beispiele beitragen möchten, klonen Sie bitte <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> und senden Sie uns eine Pull-Anfrage.</p>

<p>Wenn sie auf nicht fließende Blöcke angewendet wird, verschiebt sie den Rahmen (<a href="/de/docs/Web/CSS/CSS_Boxmodell/Einführung_in_das_CSS_Boxmodell">border edge</a>) des Elements nach unten, bis sie unter den Rand (<a href="/de/docs/Web/CSS/CSS_Boxmodell/Einführung_in_das_CSS_Boxmodell" title="CSS/box_model">margin edge</a>) aller relevanten fließende Elemente liegt. Der obere Rand (<a href="/en-US/docs/Web/CSS/margin" title="CSS/box_model">margin</a>) des nicht fließenden Blocks kollabiert.</p>

<p>Vertikale Ränder (<code>margins</code>) 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.</p>

<p>Die relevanen fließenden Elemente, deren Fließeigenschaft beendet werden soll, sind die früheren fließenden Elemente mit der selben <a href="/de/docs/Web/Guide/CSS/Block_formatting_context">Blockformatierungskontexts</a> .</p>

<div class="note">
<p><strong>Hinweis: </strong>Wenn ein Element nur fließenden (<a href="/de/docs/Web/CSS/float">float</a>) 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 <code>float</code> für seine Kinder selbst beenden. Dies wird <strong>clearfix</strong> genannt, und eine Weg, besteht darin, ein <code>clear</code> zu einem ersetzten {{cssxref("::after")}} <a href="/de/docs/Web/CSS/Pseudo-elements">Pseudoelement</a> hinzuzufügen.</p>

<pre class="language-html notranslate">#container:after {
  content: "";
  display: block;
  clear: both;
}
</pre>
</div>

<h2 id="Syntax">Syntax</h2>

<pre class="twopartsyntaxbox notranslate"></pre>

<pre class="brush: css no-line-numbers notranslate">/* Keyword values */
clear: none;
clear: left;
clear: right;
clear: both;
clear: inline-start;
clear: inline-end;

/* Global values */
clear: inherit;
clear: initial;
clear: unset;
</pre>

<h3 id="Values" name="Values">Werte</h3>

<dl>
 <dt><code>none</code></dt>
 <dd>Der Umfluss von vorherigen Elementen wird nicht beendet.</dd>
 <dt><code>left</code></dt>
 <dd>Der Umfluss von vorherigen Elementen wird auf der linken Seite beendet.</dd>
 <dt><code>right</code></dt>
 <dd>Der Umfluss von vorherigen Elementen wird auf der rechten Seite beendet.</dd>
 <dt><code>both</code></dt>
 <dd>Der Umfluss von vorherigen Elementen wird auf beiden Seiten beendet.</dd>
 <dt><code>inline-start</code></dt>
 <dd>Beendet die Fließeigenschaft des Elementes, das nach unten an den Startrand eines seines enthaltenden Blocks verschoben wird. Wenn die Textrichtung <code>ltr</code> (von links nach rechts) ist, dann wird es linksseitig sein. Falls die Textrichtung <code>rtl</code> (von rechts nach links) ist, dann wird es rechtsseitig sein.</dd>
 <dt><code>inline-end</code></dt>
 <dd>Beendet die Fließeigenschaft des Elementes, das nach unten an den Endrand eines seines enthaltenden Blocks verschoben wird. Wenn die Textrichtung <code>ltr</code> (von links nach rechts) ist, dann wird es linksseitig sein. Falls die Textrichtung <code>rtl</code> (von rechts nach links) ist, dann wird es rechtsseitig sein.</dd>
 <dt><code>inherit</code></dt>
 <dd>Der Wert des Elternelements wird geerbt.</dd>
</dl>

<h2 id="Formale_Definition">Formale Definition</h2>

<p>{{cssinfo}}</p>

<h2 id="Formale_Syntax">Formale Syntax</h2>

<pre class="syntaxbox notranslate">{{csssyntax}}</pre>

<h2 id="Beispiele">Beispiele</h2>

<h3 id="clear-left" name="clear-left">clear: left</h3>

<h4 id="HTML">HTML</h4>

<pre class="brush: html notranslate">&lt;div class="wrapper"&gt;
  &lt;p class="black"&gt;Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus sit amet diam. Duis mattis varius dui. Suspendisse eget dolor.&lt;/p&gt;
  &lt;p class="red"&gt;Lorem ipsum dolor sit amet, consectetuer adipiscing elit.&lt;/p&gt;
  &lt;p class="left"&gt;This paragraph clears left.&lt;/p&gt;
&lt;/div&gt;
</pre>

<h4 id="CSS">CSS</h4>

<pre class="brush: css notranslate">.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%;
}
</pre>

<h4 id="Ergebnis">Ergebnis</h4>

<p>{{ EmbedLiveSample('clear-left','100%','250') }}</p>

<h3 id="clear-right" name="clear-right">clear: right</h3>

<h4 id="HTML_2">HTML</h4>

<pre class="brush: html notranslate">&lt;div class="wrapper"&gt;
  &lt;p class="black"&gt;Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus sit amet diam. Duis mattis varius dui. Suspendisse eget dolor.&lt;/p&gt;
  &lt;p class="red"&gt;Lorem ipsum dolor sit amet, consectetuer adipiscing elit.&lt;/p&gt;
  &lt;p class="right"&gt;This paragraph clears right.&lt;/p&gt;
&lt;/div&gt;
</pre>

<h4 id="CSS_2">CSS</h4>

<pre class="brush: css notranslate">.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%;
}</pre>

<h4 id="Ergebnis_2">Ergebnis</h4>

<p>{{ EmbedLiveSample('clear-right','100%','250') }}</p>

<h3 id="clear-both" name="clear-both">clear: both</h3>

<h4 id="HTML_3">HTML</h4>

<pre class="brush: html notranslate">&lt;div class="wrapper"&gt;
  &lt;p class="black"&gt;Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus sit amet diam. Duis mattis varius dui. Suspendisse eget dolor. Fusce pulvinar lacus ac dui.&lt;/p&gt;
  &lt;p class="red"&gt;Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus sit amet diam. Duis mattis varius dui. Suspendisse eget dolor.&lt;/p&gt;
  &lt;p class="both"&gt;This paragraph clears both.&lt;/p&gt;
&lt;/div&gt;
</pre>

<h4 id="CSS_3">CSS</h4>

<pre class="brush: css notranslate">.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%;
}</pre>

<h4 id="Ergebnis_3">Ergebnis</h4>

<p>{{ EmbedLiveSample('clear-both','100%','300') }}</p>

<h2 id="Spezifikationen">Spezifikationen</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">Spezifikation</th>
   <th scope="col">Status</th>
   <th scope="col">Kommentar</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{SpecName('CSS Logical Properties', '#float-clear', 'float and clear')}}</td>
   <td>{{Spec2('CSS Logical Properties')}}</td>
   <td>Die Werte <code>inline-start</code> und <code>inline-end</code> hinzugefügt.</td>
  </tr>
  <tr>
   <td>{{SpecName('CSS2.1', 'visuren.html#flow-control', 'clear')}}</td>
   <td>{{Spec2('CSS2.1')}}</td>
   <td>Keine signifikanten Änderungen, jedoch werden Details geklärt.</td>
  </tr>
  <tr>
   <td>{{SpecName('CSS1', '#clear', 'clear')}}</td>
   <td>{{Spec2('CSS1')}}</td>
   <td>Ursprüngliche Definition</td>
  </tr>
 </tbody>
</table>

<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2>

<div class="hidden">Die Kompatibilitätstabelle auf dieser Seite wird aus strukturierten Daten generiert. Wenn Sie zu den Daten beitragen möchten, besuchen Sie bitte <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> und senden Sie uns eine Pull-Anfrage.</div>

<p>{{Compat("css.properties.clear")}}</p>

<h2 id="See_also" name="See_also">Siehe auch</h2>

<ul>
 <li><a href="/de/docs/Web/CSS/Boxmodell" title="CSS/box_model">Boxmodell</a></li>
</ul>