Bei Aufgaben mit diversen webbasierten Systemen (CMS, Wiki usw.) oder beim Integrieren eines Agentur-Layouts, stößt man des Öfteren auf eine bestimmte Code-Stelle. An dieser wurde float: left oder float: right zwar verwendet, aber nicht mehr mit clear beendet.

Nun kann ein fehlendes clear (both, left oder right) zu Darstellungsfehlern an ganz anderen Stellen führen.

 Tritt dieser Fall ein, muss der Fehler meist zeit- und ressourcenaufwendig gefunden werden. Erst danach kann an der eigentlichen Erweiterung/Anpassung/Integration weiter gearbeitet werden.

Daher der Tipp: Beim Verwenden von float sollte immer darauf geachtet werden, dass auch passend ein clear zum Einsatz kommt.

Ein einfaches Darstellungsbeispiel

<div class="sub-columns"><div class="left">
			
    Lorem Ipsum

  </div><div class="right">
		
    Lorem Ipsum

  </div></div>

Um diese Darstellung zu erreichen, wird bei “Div.sub-columns” folgende Zeile ergänzt

border : 1px solid #999999;

Bei “Div left und right” werden folgende Zeilen ergänzt

float: left; //beide oder 'left' und 'right' einzeln
width: 49%;
div.sub-columns > div:first-child { margin-right: 2%; }

Final sollte es wie bei dem obigen Darstellungsbeispiel aussehen, jedoch fehlt das clear.

Dieser Fehler basiert auf dem Fakt, dass das div.sub-columns nicht nachvollziehen kann, wo das floating aufhört.
 Das Ergebnis: Das div.sub-columns hat eine Höhe von 0 Pixel und es kommt zu einem Darstellungsfehler.


Der Fehler, dass das Floating nicht beendet wird, fällt meist nicht auf, solange das div.sub-columns keinen Rand oder Hintergrund hat. Erst bei Darstellungsfehlern wird das fehlende clear optisch bemerkbar.

Noch vor wenigen Jahren musste sich in diesem Fall ein Frontendler mit dieser Problematik an einen Backendler wenden, um ein Div mit class clear dem Code hinzuzufügen. Heutzutage kann dies mit :after gelöst werden.

Abgeändertes Beispiel

<div class="subcolumns"><div class="left">

        Lorem Ipsum

    </div><div class="right">
		
        Lorem Ipsum

    </div><div class="clear"></div></div>

Darstellung mit “:after” ohne Absprache mit dem Backend

div.sub-columns:after {
	clear: both;
	content: "";
	display: table;
}

Fazit

Jedes Element mit einem float benötigt bei seinem übergeordneten Element ein clear, um es wie folgt darzustellen:

<div class="subcolumns">  //:after clear

    <div class="left">    //float
			
        Lorem Ipsum

    </div><div class="right">   //float
		
        Lorem Ipsum

    </div></div>