Direktnavigation

Weitere Infos

Sie lesen:
LB Teil 1 (2009)

Little Boxes Teil 1 (Cover)

Aktuell (2015)
Einstieg in CSS

Einstieg in CSS (Cover)


2. Auflage!

Einstieg in CSS (Cover)

Inhaltsbereich

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:

Abbildung 13.4: Der Ballon ragt unten aus dem ersten Absatz heraus
Abbildung 13.4: Der Ballon ragt unten aus dem ersten Absatz heraus

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
  1. Öffnen Sie ggf. das Stylesheet bildschirm.css.
  2. Definieren Sie im Stylesheets am Ende des Abschnitts für allgemeine Klassen den folgenden Style:

    .clearing { clear: both; }

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

Abbildung 13.5: Der geclearte Absatz beginnt unterhalb des gefloateten Ballons
Abbildung 13.5: Der geclearte Absatz beginnt unterhalb des gefloateten Ballons
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.