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
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 Inhalts-Containern #col1_content, #col2_content und #col3_content umschlossen werden.
Dazu wird den drei Inhalts-Containern die CSS-Klasse: .clearfix zugewiesen. Der Clearfix-Hack (siehe css/main/base.css) sorgt dafür, dass alle Inhalte (statische Inhalte und/oder Fließumgebungen) automatisch von den Inhalts-Containern eingeschlossen werden. Die Definition findet sich 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; }
Hinweis: Bei der Überarbeitung der Datei base.css und der Auslagerung 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 im YAML-Framework nur an Blocklevel-Elemente (DIV-Container) vergeben wird, benötigt der Safari zwingend die explizite Angabe von display:block;. Andernfalls wird die Spalte #col3 mit einer viel zu geringen Breite dargestellt. Für alle anderen modernen Browser, wie der Firefox oder Opera, ist dieser wert redundant.
Die Anpassungen für den Internet Explorer wurden in die globale Anpassungsdatei Datei iehacks.css ausgelagert (Näheres, siehe Abschnitt 3.5: CSS-Anpassungen für den Internet Explorer) und sind bereits für den Internet Explorer 7 erweitert.
/*---------------------------------------------------------*/
/* Workaround: Clearfix-Anpassung für alle IE-Versionen */
/*
** IE5.x/Mac - x
** IE7 - x
*/
.clearfix { display: inline-block; }
/*
** IE5.x/Win - x
** IE6 - x
*/
/* Hides from IE-mac \*/
* html .clearfix { height: 1%; }
.clearfix { display: block; }
/* End hide from IE-mac */
/*--------------------------------------------------------*/
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 der statischen Spalte #col3 jedoch wirkt clear jedoch global und sorgt somit dafür, dass der Inhaltscontainer #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 Pseudo-Klasse :after nichts anfangen und ignoriert die Eigenschaft clear:both; und löst kein globales Clearing aus. Um den Internet Explorer trotzdem zu einem globalen Clearing zu bewegen, wird ein spezieller DIV-Container (ID ie_clearing) am Ende von #col3 eingebaut. Eine detaillierte Erläuterung finden Sie im nachfolgenden Abschnitt 2.7: Das Clearing von #col3.
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-block;}
/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */
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 Webseite zu steuern, ohne das globale Verhalten von clear:both; auszulösen. Innerhalb der floatenden Spalten #col1 und #col2 wäre die Verwendung unproblematisch, da das Clearing hier generell nur lokal innerhalb der Spalten wirkt. In der Spalte #col3 ist die Wirkungsweise, wie eben beschrieben, jedoch global und würden 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 Clearen von Fließumgebungen bzw. deren Kapselung 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 #/
/* Hides from IE-mac \*/
* html .floatbox {width:100%;}
/* End hide from IE-mac */
Beispiele zum Clearing von Fließumgebungen mit .floatbox
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.
