CSS clear – float beenden

CSS clear: float beenden

CSS clear zwingt ein Element an den linken oder rechten Rand seiner Box. Das beendet das Umfließen von Elementen, die mit float:left oder float:right positioniert sind.

display: flow-root für den umfassenden Block erzwingt das Zurück an den Rand und wird von allen immergrünen Browsern unterstützt. Für IE11 und älter bleibt der Clearfix-Hack.

18-12-15 SITEMAP CSS HTML JS Basis JS Web Tutorial SVG

clear gehört zum Block danach

CSS clear: left oder clear: both wird nicht auf das schwebende Element angewendet, sondern auf einen Block (z.B. einen Textabsatz oder eine Überschrift) nach dem schwebenden Element. CSS clear versetzt die Elemente, die auf schwebende Elemente folgen, zwangsweise an den linken bzw. rechten Rand.

CSS float left Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

CSS float right Donec faucibus vulputate metus.
Aenean condimentum erat id tellus.

CSS clear Ipsum eget urna egestas sagittis.
In nulla ligula, congue et, mollis nec.
Lingusti huppi moralies.

<p><img src="float1.webp" style="float:left"> Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
<p><img src="float2.webp" style="float:left"> Donec faucibus vulputate metus. Aenean condimentum erat id tellus.</p>
<p><img src="float3.webp" style="float:left"> Ipsum eget urna egestas sagittis. In nulla ligula, congue et, mollis nec.</p>

Wenn Bilder oder Layout-Elemente durch die Eigenschaft float umflossen werden, entsteht ein Treppeneffekt, wenn der Textabsatz nicht so hoch ist wie das Bild. Der nächste Absatz beginnt nicht unter, sondern neben dem Bild.

Ein clear:left für den folgenden Absatz setzt den Block wieder linksbündig.

clear:left Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

clear:right Donec faucibus vulputate metus. Aenean condimentum erat id tellus.

clear:both Ipsum eget urna egestas sagittis. In nulla ligula, congue et, mollis nec.

.clear {
	clear: left;
}

<p class="clear"><img style="float:left" src="float1.webp"> Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
<p class="clear"><img style="float:left" src="float2.webp"> Donec faucibus vulputate metus. Aenean condimentum erat id tellus.</p>
<p class="clear"><img style="float:left" src="float3.webp"> Ipsum eget urna egestas sagittis. In nulla ligula, congue et, mollis nec.</p>

Webseiten-Layout mit clear

CSS float:left und float: right gehörten mehr als ein Jahrzehnt zum Standardrepertoir beim Layout von Webseiten. Blöcke mit float passen sich an den Inhalt an und wurden für die Navigation und für das Layoutraster – das »Grid« eingesetzt.

Da aber selten bekannt ist, wie lang die Layoutblöcke in den Viewports der Browser werden, positioniert clear:both die Fußleiste wieder an den Rand des umfassenden Blocks.

  • Link 1
  • Link 2
  • Link 3
  • Link 4
  • Link 5
  • Link 6

Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

Fußzeile!

footer { clear: both; }
… 
<section>
    <nav>
        <ul>
            <li>Link 1</li>
            <li>Link 2</li>
        </ul>
    </nav>
    <article>
        <p>…</p>
    </article>
    <footer>Fußzeile!</footer>
</section>

display: flow-root ist das neue clear:both

clear: left/right/both hat einen Haken: Nicht immer ist klar, welches Element nicht mehr schweben soll und mit clear wieder an den Rand geschoben werden muss. Besser wäre ein Mechanismus, der dem Float-Element schon die Anweisung mitgibt, dass alle Element hinter ihm wieder an den Rand gebracht werden sollen.

display: flow-root erspart den Clearfix-Hack in den modernen Browsern (nicht IE11).

Wenn für den umfassenden Block, in dem ein Element mit flow: left oder flow: right liegt, display: flow-root vereinbart ist, spannt sich der Block automatisch bis zum Ende des schwebenden Elements auf.

display flow-root Beispiel
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt.
<div style="display: flow-root">
	<div style="float:left">
		<img src="image.png" width="175" height="176" alt="…">
	</div>
	Lorem ipsum dolor sit amet, consetetur sadipscing elitr ….
</div>

Der Clearfix-Hack

Wenn IE11 noch unterstützt werden muss, bleibt der Clearfix-Hack. Der Clearfix-Hack wird genauso wie flow-root auf das Eltern-Element der Blöcke mit float angewendet.

class="colgroup clearfix"

clearfix hat im Laufe der Zeit viele Updates erlebt und wurde jedesmal ein wenig eleganter, wenn eine alte Version von IE keine Relevanz mehr hatte.

.clearfix:after {
  content: "";
  display: table;
  clear: both;
}

clear:both vs clearfix-Hack

Es gibt einen ordentlichen Unterschied zwischen clear:both und dem clearfix-Hack: Der clearfix-Hack zieht den umfassenden Block auf.

HEADER

CONTENT

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed a odio viverra, tincidunt nulla sed, molestie urna. Mauris suscipit hendrerit dui. Praesent hendrerit mi id augue faucibus fringilla. Aliquam sodales sem eget efficitur consequat.
Vestibulum fermentum accumsan enim, sit amet tempor ligula sodales nec. Duis placerat lorem eget gravida facilisis. In in est gravida, maximus ligula vitae, dignissim arcu.
FOOTER

clear zwingt den folgenden Block FOOTER zwar unter den Block mit den float-Blöcken, aber der umfassende Block CONTENT hat weiterhin keine Höhe (sieht man vom padding und dem Text ab). clearfix hingegen spannt den umfassenden Block bis zum Ende des längsten float-Blocks auf.

Jetzt zeigt ein margin für den umfassenden Block auch endlich seine Wirkung.

Float ohne Clearfix-Hack

Clearfix ist eine bewährte, aber wenig intuitive Technik. Ganz simpel geht es mit overflow: auto und width: 100% für den umfassenden Container. Dabei müssen keine künstlichen Elemente eingefügt werden – auch nicht mit Hooks wie ::after.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi placerat varius tortor. Ut dolor eros, pharetra vel, imperdiet condimentum, tincidunt ac, urna.
Quisque quis neque. Donec eu risus. Praesent ut sapien. Fusce semper dolor vel libero. Quisque tincidunt rhoncus nibh. Pellentesque a est sit amet nulla laoreet bibendum.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi placerat varius tortor.

div.container {
  border: 1px solid #000000;
  overflow: auto;
  width: 100%;
}

div.left {
  width: 30%; float: left;
}

div.right {
  width: 30%; float: left;
}

Gefunden auf Quirksmode: Clearing floats.

Alternativen zu float und clearfix

Auch wenn float und clear lange Zeit zu den Lieblingen des Webseiten-Layouts gezählt haben, sind sie keine elegante und sichere Methode der Positionierung.

CSS3 display:flex und display: grid haben float und clear für das Layout zuverlässig ersetzt.

clear

Aufruf mit Javascript

element.style.clear = 'both';

Erblich: Nein

clear
beendet das Umfließen eines Blocks mit CSS float. CSS clear wird nur auf Blockelemente angewendet.
Werte
none | left | right | both
none
ist die Voreinstellung und hebt alle Beschränkungen auf, wo das Element im Text erscheinen darf.
left
zwingt ein Element auf die linke Seite des umfassenden Blocks.
right
zwingt ein Element auf die rechte Seite des umfassenden Blocks.
both
zwingt ein Element an den rechten oder linken Rand des umfassenden Blocks.