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" ebenfalls, wird aber noch nicht von allen Browsern unterstützt.

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.

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.

Webseiten-Layout mit clear

CSS float:left oder float: right gehören zum Standardrepertoir beim Layout von Webseiten. Blöcke mit float passen sich an den Inhalt an und werden 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

Seit Jahr und Tag verwenden wir den Clearfix-Hack für einen automatischen Schlussstrich unter Blöcken mit float. Demnächst wird die Eigenschaft display: flow-root den Clearfix-Hack ersparen.

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.

Chrome (60) und Firefox (54) beherrschen display: flow-root bereits.

Der Clearfix-Hack

Die Sache 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.

class="colgroup clearfix"

Es gibt keine CSS-Regel, die das bewerkstelligt. Es gibt aber einen CSS-Hack, das »Clearfix«. Der Clearfix-Hack wird 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

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 wird mit zunehmenden Browser-Support float und clear ersetzen.

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.