CSS clear – float beenden

clear gehört zum Block danach

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.

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.

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

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.

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.

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>HEADER</header>
<main class="clear">
	<h1>CONTENT</h1>
	<div>Float Left</div>
	<div>Float Right</div>
</main>
<footer>FOOTER</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.

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.