In diesem Abschnitt möchte ich Ihnen ein Beispiel zeigen, das Ihnen bei eigenen Experimenten eine Menge Kopfschmerzen ersparen kann.

Im Zusammenhang mit Float habe ich bereits des Öfteren die globale Wirkung von clear erwähnt. Im Abschnitt über »Floats beenden mit clear« heißt es zum Beispiel:

Wenn clear für ein HTML-Element definiert wird, das sich in einem statisch positionierten (also im Flow befindlichen) Eltern-Element befindet, gilt das clear für alle auf der Seite vorhandenen float-Umgebungen, weshalb man auch von einer globalen Wirkung spricht.

Beim Clearen des Fußbereichs in Schritt 7 des zweipaltigen Layouts ist das globale Clearing erwünscht, damit der Fußbereich immer unterhalb der anderen Spalten bleibt, aber das ist nicht immer so:

• In Kapitel 14 haben Sie mit der Eigenschaft overflow: hidden (Methode Nr. 3) für das Element <div class="galerie"> dafür gesorgt, dass die gefloateten Grafiken eingeschlossen werden.
• Stellen Sie sich vor, Sie hätten stattdessen eine Lösung mit clear genommen (Nr. 1 oder Nr. 4).

Um den dann entstehenden Effekt sichtbar zu machen, habe ich im zweispaltigen Layout den Navigationsbereich ein bisschen verlängert und wieder mit einer Hintergrundfarbe versehen:

Abbildung 16.11: Die globale Wirkung von clear erzeugt eine Lücke

Das zweite Bild wird bis unter den gefloateten Navigationsbereich geschoben. Dieser Effekt tritt auf, weil div#galerie sich in div#textbereich befindet, einem statischen (nicht positionierten) Element, und das clear am Ende dieses Bereichs deshalb eine globale Wirkung entfaltet. Es gilt also für Floats auf der ganzen Webseite, und nicht nur innerhalb von #galerie oder #textbereich.

Deswegen beginnt das zweite div#galerie, das ebenfalls gecleart ist, unterhalb des nach links gefloateten Navigationsbereichs.

Im Grunde genommen gibt es für diese Situation zwei Lösungen:

• die gefloateten Elemente im Textbereich mit overflow: hidden einschließen, weil dabei kein clear im Spiel ist
• das umgebende Element (also div#galerie) oder auch den gesamten Textbereich floaten, damit das clear nur innerhalb der Float-Umgebung gilt