Weitere Infos
Sie lesen:
LB1 (2009)
Diese Website ist von 2009 und wird nicht mehr gepflegt. Die Informationen sind zum großen Teil also wirklich veraltet.
Aktuelle Infos finden Sie hier:
13.3 Floats beenden mit clear
In Abbildung 13.3 sehen Sie, dass nicht nur der erste Absatz die Grafik umfließt, sondern auch alle folgenden. Das liegt daran, dass die gefloatete Grafik aus dem ersten Absatz nach unten herausragt.
Um diesen Sachverhalt zu verdeutlichen, bekommt der Absatz mit der Grafik einen farbigen Hintergrund (z. B. <p style="background-color: pink">). Dadurch wird sichtbar, dass die Grafik wirklich nach unten aus diesem Absatz herausragt. Achten Sie auch darauf, dass die Hintergrundfarbe des Absatzes hinter dem Bild weitergeht:
Wenn dieses Verhalten nicht gewünscht ist, muss der durch float ausgelöste Schwebezustand für die folgenden Elemente mit der Eigenschaft clear beendet werden.
clear zwingt ein folgendes Element, unterhalb eines gefloateten Elements zu beginnen, und nicht daneben. clear kann die Werte left, right oder both bekommen:
- clear:left beendet ein float:left
- clear:right ein float: right
- clear:both beendet sowohl float: right als auch float:left
Es spricht nicht viel dagegen, fast immer clear: both zu verwenden, und auch hierzu kann man gleich eine Klasse im CSS einrichten, die Sie später noch einsetzen werden. Im ToDo heißt diese Klasse clearing, aber der Name ist beliebig wählbar.
ToDo: CSS-Klasse zum Clearen von Elementen erstellen
- Öffnen Sie ggf. das Stylesheet bildschirm.css.
- Definieren Sie im Stylesheets am Ende des Abschnitts für allgemeine Klassen den folgenden Style:
.clearing { clear: both; }
- Speichern Sie das Stylesheet.
Wenn der zweite Textabsatz auf der Beispielseite nicht mehr neben, sondern unter der Grafik beginnen soll, weisen Sie ihm im HTML die eben definierte Klasse zu:
<p class="clearing">Die folgenden Schritte zeigen ...</p>
Im Browser würde das so wie in Abbildung 13.5 aussehen, wobei der Absatz mit der Grafik zur Verdeutlichung des Sachverhalts wie in Abbildung 13.4 eine Hintergrundfarbe bekommen hat.
Der »geclearte« Absatz wird oberhalb seines margin-top so weit aufgefüllt, dass der Text erst unterhalb des gefloateten Ballons beginnt. Bemerkenswert ist in Abbildung 13.5 noch, dass der farblich hervorgehobene Absatz die Grafik nicht einschließt. Sie ragt nach wie vor nach unten heraus.
Besonders beim Layouten hängt die Kunst des Floatens oft vom richtigen Einsatz von clear an strategisch wichtigen Punkten ab.
Clear: lokale oder globale Wirkung
Eine wichtige Besonderheit der Eigenschaft clear ist, dass sie je nach Umgebung unterschiedliche Auswirkungen hat:
- 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, also auf der ganzen Webseite, weshalb man auch von einer globalen Wirkung spricht.
- Steht das geclearte Element hingegen in einem gefloateten Eltern-Element, gilt das clear nur innerhalb dieser float-Umgebung, weswegen man von einer lokalen Wirkung spricht.
Das klingt zunächst vielleicht theoretisch und kompliziert, aber besonders beim Erstellen von mehrspaltigen Layouts mit float hat die globale Wirkung von clear manchmal drastische Auswirkungen, wie Sie in dem Beispiel in Kapitel 16.3 sehen können.
