2.6 Die Funktionsweise von floats im Detail
Beim Umgang mit float-Umgebungen ist Folgendes zu beachten: Innerhalb eines statischen Elements wirkt die CSS-Eigenschaft clear: left | right | both nicht lokal innerhalb des umgebenden Elternelements, sondern global, d.h. es werden alle auf der Webseite vorhandenen float-Umgebungen auf der gleichen Strukturebene berücksichtigt. 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 sehr gut sichtbar.
Warnung: Im Internet-Explorer 5.x und 6.0 kann es beim Betrachten dieser Datei zu Darstellungsfehlern kommen. Die IE-Float-Bugs sind hier nicht beseitigt. Verwenden Sie daher gegebenenfalls einen anderen Browser (Firefox, Safari, Opera ...).
Vorbereitung des Layouts
Zunächst muss dafür gesorgt werden, dass innerhalb der Spalten frei mit Fließobjekten gearbeitet werden kann. Dazu muss sichergestellt werden, dass die späteren Inhalte in jedem Fall vollständig von den statischen Containern #col1_content, #col2_content und #col3_content umschlossen werden.
Zu diesem Zweck wird den drei Containern die CSS-Klasse: .clearfix zugewiesen. Der Clearfix-Hack sorgt dafür, dass alle Inhalte (statische Inhalte und/oder Fließumgebungen) automatisch eingeschlossen werden. Die Definition der Klasse finden Sie in der Datei base.css.
/* Clearfix-Methode zum Clearen der Float-Umgebungen */
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
/* Diese Angabe benötigt der Safari-Browser zwingend !! */
.clearfix { display: block; }
Wichtig: Obwohl die Klasse .clearfix im YAML-Framework nur an Block-Level-Elemente (DIV-Container) vergeben wird, benötigt der Safari Browser zwingend die explizite Angabe von display:block;. Andernfalls wird der Container #col3_content mit einer viel zu geringen Breite dargestellt. Für alle anderen modernen Browser, wie Firefox oder Opera, ist dieser Wert redundant.
Wie man sieht, kommt auch beim Clearfix-Hack clear:both; zum Einsatz. Innerhalb der float-Spalten #col1 und #col2 wirkt die Eigenschaft clear daher nur lokal. Genau, wie man es sich wünscht. Innerhalb des statischen Containers #col3 wirkt clear:both jedoch global und sorgt somit dafür, dass der Container #col3_content bis zum unteren Ende der längsten float-Spalte verlängert wird. Auch dieses Verhalten ist innerhalb des YAML-Frameworks ausdrücklich erwünscht.
Der Internet Explorer kann bis zur Version 6 mit der CSS Pseudo-Klasse :after leider nichts anfangen. Die Clearfix-Methode ist aber nicht vollständig wirkungslos im Internet Explorer. Innerhalb der beiden Container #col1_content und #col2_content wird sie zum Einschließen der Inhalte herangezogen. Hierzu sind noch ein paar Anpassungen für den IE von Nöten. Diese Anpassungen werden zentral in der Datei yaml/core/iehacks.css verwaltet. Näheres, siehe Abschnitt 3.5: CSS-Anpassungen für den Internet Explorer.
/*---------------------------------------------------------*/
/* Workaround: Clearfix-Anpassung für alle IE-Versionen */
/*
** IE7 - x
*/
.clearfix { display: inline-block; }
/*
** IE5.x/Win - x
** IE6 - x
*/
* html .clearfix { height: 1%; }
.clearfix { display: block; }
/*--------------------------------------------------------*/
Der Internet Explorer ignoriert die Eigenschaft clear:both; jedoch aufgrund der fehlenden CSS-Unterstütung der Pseudo-Klasse :after und löst somit kein globales Clearing innerhalb von #col3 aus. Um den IE trotzdem zu einem globalen Clearing zu bewegen, wird ein spezieller DIV-Container (#ie_clearing) am Ende von #col3 in die Quelltext-Struktur eingebaut. Eine detaillierte Erläuterung hierzu finden Sie im nachfolgenden Abschnitt 2.7: Das Clearing von #col3.
Hinweis: Als weiterführende Informationsquelle, vor allem was die Funktionsweise von float-Umgebungen und den Umgang mit verschiedenen Browsern betrifft, sei an dieser Stelle auf den sehr ausführlichen Artikel "Grundlagen für Spaltenlayouts mit CSS" von Mathias Schäfer im SelfHTML-Weblog verwiesen.
Aufbereitung der Inhalte
Für die späteren Inhalte muss eine Möglichkeit gefunden werden, den Textfluss innerhalb der des statischen Containers #col3 zu steuern, ohne das globale Verhalten von clear:both; auszulösen. Innerhalb der floatenden Spalten #col1 und #col2 ist die Verwendung dieser Eigenschaft unproblematisch, da das Clearing hier generell nur lokal innerhalb der Spalten wirkt. Innerhalb von #col3 ist die Wirkungsweise, wie eben beschrieben, jedoch global und würde zu großen vertikalen Zwischenräumen führen. Zumindest, wenn man nichts dagegen tut.
Die Lösung liegt in der Overflow-Methode, die ebenfalls das Einschließen von Fließumgebungen ermöglicht. Die Overflow-Methode arbeitet mit der Eigenschaft overflow:hidden, daher entstehen keine Konflikte mit dem Clearing der Spalten. Für die Aufbereitung der Inhalte steht im YAML-Framework die CSS-Klasse .floatbox zur Verfügung deren Anwendung in den zwei folgenden Beispielen erläutert wird.
Die Definition der CSS-Klasse .floatbox finden Sie in der Datei base.css.
/* Clearen per Overflow */
.floatbox { overflow:hidden; }
Auch bei .floatbox benötigt der Internet Explorer etwas Hilfe. Diese findet sich wiederum in der globalen Anpassungsdatei iehacks.css (Nähreres, siehe Abschnitt 3.5: CSS-Anpassungen für den Internet Explorer).
/* .floatbox-Anpassung für IE */
* html .floatbox {width:100%;}
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 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.
