Little Boxes – CSS-Positionierung und mehrspaltige Layouts

Block Formatting Context

Testen Sie unsere 1870 Kurse

10 Tage kostenlos!

Jetzt testen Alle Abonnements anzeigen
Die globale Wirkung der Clear-Eigenschaft führt mitunter zu Problemen in mehrspaltigen Layouts. CSS bietet allerdings mit dem Block Formatting Context eine passende Lösung hierfür an.

Transkript

Die CSS-Eigenschaft Clear hat in mehrspaltigen Float-basierten Layouts manchmal seltsame Nebenwirkung, die mit einen Ding namens Block Formatting Context kurz BFC zusammenhängt. Beides möchte ich jetzt kurz erklären. Zunächst einmal geht es darum, dass Clear, wenn es gefloatete Elemente cleart für die gesamte Seite gilt, also nicht nur für eine Spalte, sondern für die ganze Seite und das nennt man die globale Wirkung, also global ist ein bisschen übertrieben, man könnte auch sagen, die Seitenbreite-Wirkung, aber global klingt irgendwie netter. Ich mache jetzt hier mal die Web-Developer-Toolbar an, eine Änderung für den Firefox und da kann ich im Menü Kontur anzeigen lassen, dass gefloatete Elemente hier so umrandet werden. Damit kann ich ohne in Quelltext zu schauen sehen, welche Elemente gefloatet sind. Hier ist das die Navigation nach links und der gefloatete Heißluftballon hier. Wenn jetzt hier gecleart werden würde, dieser Absatz zum Beispiel, dann gilt dieses Clear für diesen Absatz für alle gefloateten Elemente, das heißt diese Absatz fängt unter allen gefloateten Elementen an. Das klingt zunächst einmal gar nicht dramatisch, aber das kann es sehr schnell sein, ich habe hier die Übungsdateien soweit vorbereitet und zwar schauen Sie sich einmal die Galerie Nummer 1 an. Und dort habe ich die Navigation etwas verlängert, achten Sie rechts auf die zweite Grafik, sie rutscht nach unten - ups - gemeint ist diese hier, Landschaftsbild Nummer 2. ich mache hier wieder einmal die Kontur sichtbar für gefloatete Elemente und jetzt sehen Sie, was hier los ist. Also, diese Navigation ist komplett gefloatet und die Galerie ist hier gecleart worden und zwar mit einem micro clearfix hack und da kommt ein Clear drin vor. Also, bei dem zweiten Landschaftsbild, das wird gecleart, ich rufe das einmal hier auf im zweiten Inspektor und zeige hier die Galerie cf, da ist der micro clearfix drin aufgerufen mit cf und darin enthalten ist ein Clear. Wenn wir das wegnehmen würden, dann würde das nicht mehr hier vorhanden sein, also die Galerie muss gecleart sein, aber das würde dann hier nicht mehr gehen, das bei Galerie 2, dort ist das Umschließen der Floats hier in der Galerie erreicht mit overflow:hidden. Eine der Methoden zum Umschließen von Floats, overflow:hidden, hat keinerlei Clear da mit drin, das umschließt die Floats ganz von alleine, ohne Clear, und also gibt es hier auch keine Seitenbreite-Wirkung von Clear. Das ist bei eigenen Experimenten später wirklich manchmal, so dass es echte Kopfschmerzen bereitet, wenn man hier das Layoutet und plötzlich rutscht hier das weiter noch unten. Im Anfang, wenn die Navigation kurz ist, dann macht das überhaupt nichts. Aber später, wenn die Navigation irgendwann mal wachsen sollte, dann ist plötzlich dieser Effekt da und dann sitzt man davor und sagt: "Nee, was ist den das hier wieder?" Diese Effekt hier mit dem Loch hier, mit der Lücke oben drüber, tritt auf, wenn div.Galerie sich hier im Textbereich befindet, also in Float befindet in ein statisch positionierten Bereich, weil dann ist der Block Formatting Context und in dem gilt das Clear, ist der body also die ganze Seite. Wenn man jetzt einen neuen Block Formatting Context erzeugt, das kann man zum Beispiel mit Floaten, dann würde das nur für diesen Bereich gelten. Wenn ich jetzt einen neuen Block Formatting Context erzeuge, hier, indem ich die Galerie hier zum Beispiel mit einem Float versehe, dann sehen Sie, Float:left und schon gilt das Clear nur noch innerhalb dieses gefloateten Elements. Das ist ein neue Block Formatting Context, normalerweise ist das die ganze Seite aber mit bestimmten Werten wie Float, Position absolute oder fixed overflow, scroll oder hidden und display table und Konsorten erzeugt man einen neuen Block Formatting Context. Das heißt also hier das overflow:hidden, selbst wenn es ein Clear hätte, das würde diese globale Wirkung nicht haben. So, Fazit dieses kleinen Exkurses, wenn irgendwo Lücken auftauchen und das wird gefloatet, dann könnte daran ein Clear schuld sein, das für die ganze Seite gilt, so dass das zweite Element hier das gecleart ist unter alle Floats rutscht. Sollte das der Fall sein, muss man einen neuen Block Formatting Context erzeugen oder das Clear vermeiden. Also, das Clear vermeiden könnte man zum Beispiel mit overflow:hidden, einen neuen Block Context erzeugen könnte man mit Float Position, absolute oder fixed, overflow, autoscroll, oder hidden oder display table, table style, table caption oder inline block. Das wäre die komplette Liste. Man kann natürlich auch das Clear von vornherein vermeiden: Sie sehen hier die gezeigten Clearing-Methoden, die Methoden zum Umschließen von gefloateten Elementen und HTML-Elemente mit Clear erzeugt keinen neue Block Formatting Context und hat eine globale Wirkung, weil ein Clear drin ist. Set a float to fix a float erzeugt einen neuen BFC, weil es wird gefloatet, overflow:hidden erzeugt einen und display: table erzeugt auch einen. Ausserdem wird bei diesem Methoden auch gar nicht gecleart. Der Clearfix gegen ist tolle Sache, erzeugt aber keinen neuen BFC und hat hier wohl ein Clear mit drin. Also, langer Rede kurzer Sinn, wenn irgendwo Lücken auftauchen, diesen Film nochmal ganz in Ruhe anschauen und zu versuchen, entweder kein Clear einzusetzen, oder einen neuen Block Formatting Context rund um das geclearte Element erzeugen und dann sieht es auch wieder besser aus.

Little Boxes – CSS-Positionierung und mehrspaltige Layouts

Sie erfahren, wie HTML-Elemente mit den Eigenschaften "position" und "float" auf Webseiten verschoben werden können und lernen das kontrollierte Zusammenspiel von Float und Clear kennen.

3 Std. 55 min (49 Videos)
Derzeit sind keine Feedbacks vorhanden...
 

Dieser Online-Kurs ist als Download und als Streaming-Video verfügbar. Die gute Nachricht: Sie müssen sich nicht entscheiden - sobald Sie das Training erwerben, erhalten Sie Zugang zu beiden Optionen!

Der Download ermöglicht Ihnen die Offline-Nutzung des Trainings und bietet die Vorteile einer benutzerfreundlichen Abspielumgebung. Wenn Sie an verschiedenen Computern arbeiten, oder nicht den ganzen Kurs auf einmal herunterladen möchten, loggen Sie sich auf dieser Seite ein, um alle Videos des Trainings als Streaming-Video anzusehen.

Wir hoffen, dass Sie viel Freude und Erfolg mit diesem Video-Training haben werden. Falls Sie irgendwelche Fragen haben, zögern Sie nicht uns zu kontaktieren!