Schwarzcode

Nachschlagewerk zur Ergänzung des Unterrichts in Frontend Development – und für mich. Sehr subjektiv gefärbt und ohne Anspruch auf Vollständigkeit.


Spaltenlayout mit Floating

Für mehrspaltige Layoutbereiche, sprich für die allermeisten Layouts, ist es irgendwo notwendig, Blockelemente wie Divs oder List-Items nebeneinander zu stellen. Das funktioniert auch soweit ganz simpel mit der Eigenschaft float und den Werten left oder right, welche eigentlich für etwas anderes gedacht sind.

Da Blockelemente ohne weitere Angaben immer so breit sind, wie ihr Elternelement, müssen nebeneinander stehende Elemente Breiten (width) haben, welche addiert kleiner oder höchstens gleich gross sind wie die Breite des Elternelements. Nachfolgend ein Beispiel.

#Mama     { width: 900px; }
#Mama div { width: 300px; float:left; } /* 3 Divs */

Nur schon mit einem Pixel mehr auf der Kindelement-Breite, rutscht die letzte Spalte auf die nächste Zeile.

Der Kollaps nach dem Floating

Das Problem oder mehr die Situation ist jetzt, dass ein Elternelement mit floatenden Kindelementen, seine Höhe verliert – es kollabiert. Die Logik welche zu diesem Rendering führt, ist mir schleierhaft. Aber es verhält sich immerhin auf allen Browsern seit jeher gleich. Im folgenden einfachen Beispiel stehen vier Blocke (schraffiert) mit floatenden Kindelementen. Wie ihr seht, bricht die Höhe des ersten Blocks zusammen und er ist nur noch sichtbar, weil er ein Padding enthält. Die Kindelemente ragen unten über die «Mama» hinaus. Gleichzeitig rutschen nachfolgende Elemente entsprechend nach oben.

561

Die Lösung: der «Clearfix»

Die Blocke 2 bis 4 im obigen Beispiel haben einen «Hack», der dies verhindert. Und zwar wird nach den Spalten innerhalb des Elternelements per CSS ein Pseudo-Element «eingefügt», welches wie folgt erzeugt wird:

.Hack:after {content:""; clear:both; display:block; }

Dieser Hack ist so populär, dass er einen eigenen Namen hat: Clearfix. Die wesentliche Eigenschaft ist hier clear:both, welche das Floating der vorangehenden Elemente «klärt». Den leeren «Content» braucht es, damit das Pseudo-Element vom Browser überhaupt gerendert wird und display:block, damit sich das Pseudo-Element wie ein Div verhält und die ganze Breite einnimmt. Entfernt mal den Kommentar im CSS auf der letzten. Dann wird das Pseudo-Element sichtbar.

Noch schlimmer mit unterschiedlich hohen Elementen

Sind die floatenden Elemente unterschiedlich hoch, ist der Kollaps noch besser sichtbar. Man könnte sagen, es rutscht nach oben, was Platz hat. Das sieht dann wie nachfolgend aus. (Entfernt hier den Kommentar im CSS, um das Pseudo-Element zu aktivieren.)

561

 


Verantwortlich:
Jürgen Wössner
E-Mail

Schwarzcode

Nachschlagewerk zur Ergänzung des Unterrichts in Frontend Development – und für mich. Sehr subjektiv gefärbt und ohne Anspruch auf Vollständigkeit.

Aber mit so einem kleinen Bildschirm hier ist das ganze echt nutzlos. Geh mal rüber an einen grösseren Bildschirm.