Ersatz für <br clear="all">

Mit dem HTML-Tag <br clear="all"> kann man in HTML 4.01 Transitional erreichen, dass der Textfluss nach einem gefloateten Element (Bild, div-Container, o.ä.) fortgesetzt wird. Allerdings ist <br clear="all"> vom W3C als "deprecated" eingestuft und sollte in neu erstellten HTML-Dokumenten nicht mehr verwendet werden. In der Variante HTML 4.01 Strict ist es bereits jetzt nicht mehr enthalten. Was also tun?

Für die Lösung dieses Problems gibt es mehrere Möglichkeiten, von denen ich hier drei aufzählen möchte. Alle drei Varianten basieren auf CSS bzw. auf CSS-Klassen.

Verwendung einer Klasse im <br>-Tag

Das <br>-Tag wird mit einer zusätzlichen CSS-Klasse notiert, die den Textfluss steuert. In dieser Klasse wird mit clear:both erreicht, dass der Text nach dem gefloateten Element fortgesetzt wird. Auf die Steuerung des Textflusses mit <br> braucht man also nicht zu verzichten. Der Code sieht wie folgt aus:

Im Stylesheet oder im <style>-Bereich des HTML-Dokuments: 

  br.next {
    clear: both
  }

Im HTML-Dokument: 

  <div style="float: left; width: 200px; height: 200px; border: 2px solid">
    Nach links gefloateter Text
  </div>
  <p>Dieser Text steht neben der Box.<br class="next">

  Dieser Text steht unter der Box.</p>

<div> mit eigener Klasse für Fortsetzung

Für die Steuerung des Textflusses wird eine spezielle Klasse verwendet, die zusammen mit einem <div> eingesetzt wird. Über diese Klasse wird der Textfluss nach dem gefloateten Element fortgesetzt. Der Code sieht so aus:

Im Stylesheet oder im <style>-Bereich des HTML-Dokuments: 

  .next {
    clear: both;
    height: 1px;
    overflow: hidden
  }

Im HTML-Dokument: 

  <div style="float: left; width: 200px; height: 200px; border: 2px solid">
    Nach links gefloateter Text
  </div>
  <p>Dieser Text steht neben der Box.</p>

  <div class="next"></div>

  <p>Dieser Text steht unter der Box.</p>

Ein Vorteil dieser Lösung besteht darin, dass über die Angabe von height in der Klasse next der Abstand zum nachfolgenden Text gesteuert werden kann. Wenn also statt height:1px z.B. height:1.5em angegeben wird, wird ein größerer Abstand zum nachfolgenden Text freigelassen.

Verwendung einer Klasse im nachfolgenden Element

Wie im vorangegangenen Beispiel wird eine Klasse zur Steuerung des Textflusses verwendet. Diese Klasse wird aber keinem eigenständigen Element wie dem <div>-Container im Beispiel zuvor zugewiesen, sondern als zusätzliche Klasse dem Element, das dem gefloateten Element folgt. Das Ganze sieht dann so aus:

Im Stylesheet oder im <style>-Bereich des HTML-Dokuments: 

  .next {
    clear: both
  }

Im HTML-Dokument: 

  <div style="float: left; width: 200px; height: 200px; border: 2px solid">
    Nach links gefloateter Text
  </div>
  <p>Dieser Text steht neben der Box.</p>

  <p class="next">Dieser Text steht unter der Box.</p>

Natürlich dürfen bei dieser Variante die Eigenschaften height und overflow in der Klasse next nicht verwendet werden, weil diese die Formatierung des <p>-Blocks beeinflussen. Und ein Textblock mit der Höhe von einem Pixel ist wahrscheinlich nicht das Ergebnis, das erzielt werden sollte.

Welche Alternative ist die beste?

Welche der drei aufgezeigten Möglichkeiten bevorzugt werden soll, kann man pauschal nicht sagen. Wer bisher den Textfluss mit <br clear="all"> gesteuert hat, wird sicherlich zur ersten Alternative tendieren. Im Hinblick auf eine klare Struktur des HTML-Dokuments ist jedoch die dritte Möglichkeit zu präferieren, weil im Dokument keine zusätzlichen HTML-Tags notiert werden müssen.

Mir persönlich sagt die zweite Möglichkeit (leerer <div>-Block mit eigener Klasse) am meisten zu. Die Blöcke zur Fluss-Steuerung kann ich so am einfachsten im Dokument platzieren und wiedererkennen. Ich setze diese Art der Steuerung in allen von mir erstellten Webseiten ein.