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.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Donec faucibus vulputate metus. Aenean condimentum erat id tellus.
Ipsum eget urna egestas sagittis. In nulla ligula, congue et, mollis nec.
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.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Donec faucibus vulputate metus. Aenean condimentum erat id tellus.
Ipsum eget urna egestas sagittis. In nulla ligula, congue et, mollis nec.
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.
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.
Es gibt keine CSS-Regel, die das bewerkstelligt. Es gibt aber einen CSS-Hack – 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.
CONTENT
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.
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.