Document ID: /fineweb-2-swissfilter-quality_10-filterrobots/filtered/03395.jsonl.gz/2995

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