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)

Beispielseiten

Inhaltsbereich

14.6 Methode 1: Float einschließen mit clear

Die erste Lösung besteht darin, kurz vor dem Ende des div-Elements ein clear einzufügen.

Im folgenden ToDo ergänzen Sie im HTML einen Zeilenumbruch br, der auch ohne CSS einigermaßen sinnvoll ist. Diesem br-Element wird die Klasse clearing zugewiesen, die im CSS gecleart wird.

ToDo: Methode 1 – Float einschließen mit clear
  1. Kopieren Sie die Datei galerie_clear.html aus dem Basisordner für diesen Abschnitt in den Übungsordner.
  2. Öffnen Sie galerie_clear.html im Editor.
  3. Ergänzen Sie jeweils vor dem </div> einen Zeilenumbruch br, dem Sie die Klasse clearing zuweisen:

    <img src="landschaft01.jpg" width="203" height="180" alt="Von Bäumen umstandener See, in dem sich Wolken spiegeln" />
    <h3>Landschaftsbild 01</h3>
    <p>Lorem ipsum dolor sit amet, ...</p>
    <p>Phasellus suscipit blandit risus ... </p>
    <br class="clearing" />
    </div> <!-- Ende .galerie 01 -->
    <div class="galerie">
    <img src="landschaft02.jpg" width="203" height="180" alt="Weite Grasfläche mit Wolken und Halmen im Vordergrund" />
    <h3>Landschaftsbild 02</h3>
    <p>Lorem ipsum dolor sit amet, ...</p>
    <br class="clearing" />
    </div> <!-- Ende .galerie 02 -->

  4. Blenden Sie den Zeilenumbruch aus:

    div.galerie br {
      width: 0;
      height: 0;
      font-size: 0;
      line-height: 0;
    }

  5. Ergänzen Sie im Style-Block von galerie_clear.html eine Klasse zum Clearen:

    .clearing { clear: both; }

  6. Speichern Sie die Webseite und betrachten Sie sie im Browser.

Da das geclearte br innerhalb des umgebenden div sitzt, wird das div bis unter das gefloatete Bild erweitert. Einziger Nachteil dieser Lösung ist das zusätzliche HTML-Element, das Sie für jedes Bild Ihrer Galerie hinzufügen müssen. Statt des Zeilenumbruchs können Sie natürlich auch jedes andere HTML-Element nehmen, zum Beispiel ein zusätzliches leeres div.

Anmerkung (4. Februar 2013)

Im Buch wurde ursprünglich eine horizontale Linie hr eingefügt, aber der Zeilenumbruch mit br hinterlässt weniger Spuren im Browserfenster. 

Globale Wirkung des Clearing beachten

Ein weiteres potenzielles Problem beim Verwenden dieser Methode hängt mit der etwas weiter oben erwähnten globalen Wirkung des clear zusammen (im Buch siehe Seite 316 für ein Beispiel).