2.6 Die Funktionsweise von floats im Detail

Beim Umgang mit float-Umgebungen ist Folgendes zu beachten: Innerhalb eines statischen Elements wirkt der clear-Befehl nicht lokal innerhalb des umgebenden Elternelements, sondern er wirkt global, d.h. er berücksichtigt alle auf der Webseite vorhandenen floats. Wie sich dieses Verhalten auswirkt, lässt sich am besten an einem Beispiel erklären. In der Datei global_clear.html wird das eben beschriebene Verhalten sichtbar.

artikel/xhtml/global_clear.html

Hinweis: Im Internet-Explorer kann es beim Betrachten der Datei global_clear.html zu Darstellungsfehlern kommen. Die IE-Float-Bugs sind hier nicht beseitigt. Verwenden Sie daher gegebenenfalls einen anderen Browser.

Vorbereitung des Layouts

Um dieses Verhalten im normalen Fließtext zu vermeiden, muss eine Möglichkeit gefunden werden, den Textfluss innerhalb der Webseite zu steuern, ohne das globale Verhalten von clear:both; auszulösen.

Dazu wird den drei Inhalts-Containern #col1_content, #col2_content und #col3_content die CSS-Klasse: .clearfix zugewiesen. Der Clearfix-Hack (siehe css/main/base.css) sorgt dafür, dass die Spalten immer alle Spalteninhalte (statische Inhalte und/oder Fließtexte) umschließen, ohne das globale Verhalten auszulösen.

Hinweis: Grundlage für den Aufbau dieser Kapselung ist die ausgezeichnete Übersetzung eines Artikels zum "Markupfreien Clearen von Floats".

/* Clearfix-Methode */
.clearfix:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}

/* Für Safari/Mac */
.clearfix {display: block;}

Wie man sieht, kommt auch beim Clearfix-Hack clear:both; zum Einsatz. Jedoch aufgrund der besonderen Position innerhalb der Pseudoklasse :after wird die globale Wirkung in allen modernen Browsern aufgehoben und auf den Inhalt des DIV-Containers beschränkt. Der Internet Explorer kann bis zur Version 6 mit :after generell nichts anfangen und ignoriert den clear-Befehl daher völlig.

Hinweis: Bei der Überarbeitung der Datei css/main/base.css und der Verlagerung der IE-Hacks in ein gesondertes Stylesheet im Zuge der YAML Version 2.0 bin ich auf ein Problem im Safari-Browser/Mac gestoßen. Obwohl die Klasse .clearfix nur an Blocklevel-Elemente vergeben wird, benötigt der Safari zwingend die Angabe von display:block;. Andernfalls wird die Spalte #col3 mit einer viel zu geringen Breite dargestellt. Andere moderne Browser, wie der Firefox oder Opera, benötigen diese Angabe nicht.

Die Clearfix-Methode benötigt daher für den Internet Explorer noch ein paar Anpassungen. Diese werden in die Datei css/main/iehacks.css ausgelagert. Die speziellen IE/Mac-Kommentare im Stylesheet habe ich mit übernommen, obwohl die CSS-Dateien in dieser Form dem IE/Mac so nicht zugänglich sind. Allerdings soll der Hack auch bei einer evtl. Anpassung der CSS-Dateien an den IE/Mac voll funktionstüchtig bleiben.

/* Clearfix-Anpassung für IE */
.clearfix {display: inline-table;}

/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */

Aufbereitung der Inhalte

Den Inhalts-Containern der einzelnen Spalten wurde bereits die CSS-Klasse .clearfix zugewiesen. In ihrem Inneren kann also bereits mit Fließobjekten gearbeitet werden. Die CSS-Klasse .clearfix sorgt dafür (wie eben erläutert), dass der Inhalt in jedem Fall vollständig umschlossen wird.

Begrenzung des Textflusses innerhalb einer Spalte

In den Spalten kann beliebig mit Fließobjekten gearbeitet werden. Dabei kann es sinnvoll sein, den Textfluss auf einen bestimmten Bereich zu beschränken, z.B. bis zur nächsten Teilüberschrift. Dadurch kann verhindert werden, dass beispielsweise eine Grafik in einen nachfolgenden, inhaltlich fremden, Abschnitt hinein fließt.

Dazu wird der Inhaltsbereich, über den sich der Textfluss erstrecken soll, gekapselt. Hierzu steht die CSS-Klasse .floatbox (basierend auf der Overflow-Methode) bereit. Dazu zwei Beispiele:

Beispiel 1: Ein Bild soll innerhalb eines Absatzes (Paragraph) vom Text umflossen werden. In diesem Fall wird dem umschließenden <p>-Tag die Klasse .floatbox zugewiesen. Der Textfluss ist damit auf diesen einen Absatz begrenzt - es ist kein weiterer HTML-Code zum Beenden des Textflusses erforderlich.

<p class="floatbox">
  <img src="bild.jpg" style="float:left;" alt="" />
  Hier folgt der Text des Absatzes, welcher das Bild umfließt ...
</p>

<p>Hier ist der Textfluss zu Ende. Dieser Absatz beginnt immer unterhalb des Bildes.</p>

Beispiel 2: Ein Bild soll innerhalb eines Textabschnitts, bestehend aus mehreren Absätzen umflossen werden. Der Textfluss soll jedoch vor der nächsten Teilüberschrift enden.

Dazu wird der entsprechende Abschnitt mit einem speziellen DIV-Container <div class="floatbox"> gekapselt. Innerhalb dieses DIV-Containers können Fließobjekte mit float:left; oder float:right; beliebig verwendet werden:

...
<h2>Teilüberschrift 1</h2>
<div class="floatbox">
  <img src="bild.jpg" style="float:left;" alt="" />
  <p> ... viel viel Fließtext ...</p>
  <p> ... noch mehr Fließtext ...</p>
  <p> ... und noch ein letzter Absatz im Textfluss</p>
</div>

<h2>Teilüberschrift 2</h2>
...

Der Textfluss ist durch die Kapselung auf den DIV-Container beschränkt. Es braucht am Ende daher kein spezieller HTML Code mit clear:both; eingefügt werden.

Zur Information: In der Version 1.0 von YAML wurden beispielhaft sowohl die Clearfix-, als auch die Overflow-Methode zum markupfreien Clearen von Fließumgebungen innerhalb der Inhalts-Spalten vorgestellt:

.floatbox nach Clearfix-Methode
Der Clearfix-Hack wurde dazu leicht modifiziert. Ihm wurde zusätzlich ein float:left; mitgegeben . Dadurch trat der gewünschte Effekt ein, dass das umgebende DIV bereits eine Fließumgebung darstellt. Der im Clearfix-Hack verankerte Befehl clear:both; innerhalb von .clearfix:after arbeitet somit nur noch lokal innerhalb des DIV-Containers.
.floatbox nach Overflow-Methode
Bei dieser wunderbar einfachen Lösung kommt man ohne zusätzliche geschachtelte floats aus, da kein clear:both; eingesetzt wird. Stattdessen wird die Fließumgebung durch ein einfaches overflow:hidden; gekapselt.

Die Overflow-Methode hat sich in der Anwendung als ausgesprochen robust erwiesen und wird daher seit YAML V1.1 ausschließlich eingesetzt.

/* Clearen per Overflow */
.floatbox { overflow:hidden; }

Auch bei .floatbox benötigt der Internet Explorer etwas Hilfe. Diese findet sich wiederum in der Datei css/main/iehacks.css.

/* .floatbox-Anpassung für IE #/
/* Hides from IE-mac \*/
* html .floatbox {width:100%;}
/* End hide from IE-mac */

»»» Abschnitt 2.7: Der Clou