Jul 2009
CSS float: Schwebende Boxen für die Positionierung 
CSS float nimmt Blöcke aus dem normalen Fluss des Dokuments und setzt sie an die linke oder rechte Seite des umfassenden Blocks, während der restliche Text des umfassenden Blocks um sie herumfließt.
In Textverarbeitungsprogrammen wie Word und Satzprogrammen wie Quark oder InDesign kennen wir das „Umfließen“ von Blöcken auch noch nicht viel länger als die Floats aus CSS1.
Obwohl CSS uns durch die Eigenschaft position einen mächtigen Mechanismus für die Positionierung von Elementen zur Hand gegeben hat, ist float eine elegante Alternative für die Positionierung von Layout-Elementen auf einer Website.
Die CSS-Eigenschaft float ist intuitiver und leidet weniger unter Browserfehlern als position. Kleinere Blöcke mit Texten oder Bildern behalten bei Änderungen der Seite einen besseren Zusammenhang mit den Texten, da sich ihre ihre Position zusammen mit dem Text automatisch ändert – sie »fließen mit«. So bleiben Bilder an der linken oder rechten Seite des Textes an der richtigen Position im Text.
Besonders geschätzt wird die Möglichkeit, eine Fußzeile durch die CSS-Eigenschaft clear immer unter schwebenden Blöcken zu positionieren. Das erlaubt Fußzeilen, die sich immer hinter den Text setzen lassen – ganz gleich, wie lang der vorangehende Block wird.
Schwebende Element können an jeder beliebigen Stelle des Dokuments auftauchen. Sie werden durch die CSS-Eigenschaft float erzeugt, die drei Werte aufweisen kann: left, right oder none. Wichtig: Für ein schwebendes Element muss immer auch eine Breite angegeben werden, ansonsten würde das float per Voreinstellung immer so breit wie der umfassende Block.
Bilder von Text umfließen lassen
So ziemlich alles darf floaten: Blockelemente wie Textabsätze und div-Container genauso wie Inlineelemente wie Bilder und span-Container.
<p style="float: left; width: 250px; "> <div style="float:left; width 300px"> <img style="float:left; width: 120px; height: 120px; margin-right: 10px">
Schwebende Bilder halten auch in flexibel breiten Blöcken, wenn das Browserfenster verkleinert oder vergrößert wird.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de">
<head>
<title> CSS-Eigenschaft float für Bilder </title>
<style>
body { margin: 0 9em; }
img { float: left; margin-right: 1em; }
</style>
</head>
<body>
<p> <img … width="240" height="182" />Lorem ipsum dolor …</p>
<p>In pharetra. Praesent aliquet neque. Integer … </p>
</body>
</html>
Wichtig! Damit z.B. eine Überschrift unter dem Text wieder in Form kommt – sprich: wieder am rechten Rand beginnt, muss style="clear: both;" für das HTML-Element (z.B. h3 { clear: both; }) notiert werden.
Spalten-Layout mit CSS float
Auf diese Weise lassen sich auch HTML-Blöcke für das Layout der Seite für große Monitore nebeneinander setzen. Wenn das Browserfenster kleiner ist oder die Auflösung nicht für alle Spalten reicht, kollabieren die Spalten und erscheinen untereinander.
Das könnte zu unserem Lieblingslayout werden, denn nun könnten wir unseren Besuchern mit großen Monitoren ein Drei- oder Vier-Spalten-Layout bieten, während das Layout für Besucher mit kleinen Monitoren zu einem Zwei-Spalten-Layout mutiert. Immerhin wird es höchste Zeit, sich um das Erscheinungsbild von Webseiten auf den kleinen Monitoren unserer mobilen Endgeräte zu kümmern.
<style type="text/css" media="screen">
.float1 { float: left; width: 12em; }
.float2 { float: left; width: 24em; }
.float3 { float: left; width: 12em; margin-bottom: 1em; }
</style>
…
<div class="float1">
…
</div>
<div class="float2">
<p>Lorem ipsum </p>
<p>In pharetra. </p>
<p>Pellentesque </p>
</div>
<div class="float3">
…
</div>
<div class="float3">
…
</div>
CSS float: Treppen beim Umfließen von Bildern
Wenn Textabsätze mit links oder rechts schwebenden Bildern gesetzt nicht so hoch sind wie das schwebende Bild, entstehen in aufeinander folgenden Textblöcken Treppenstufen.
Damit der folgende Absatz wieder bis an den rechten (oder linken Rand rutscht), braucht er die CSS-Eigenschaft clear.
clear weist vier Werte auf: left, right, both und none. clear: right als Stil für die Überschrift sorgt dafür, dass eine Überschrift so weit nach unten geschoben wird, dass sie unter einem rechts schwebenden Element landet und wieder bis zur äußerst rechten Seite des umfassenden Blocks läuft.
CSS clear: Umfließen von Blöcken beenden
CSS clear: left schiebt ein Element so weit nach unten, dass es unter einem links schwebenden Element steht, clear: both versetzt das Element sowohl unter rechts als auch unter links schwebende Boxen. Wenn die CSS-Eigenschaft float in einem Dokument benutzt wird, definiert man z.B. alle Überschriften vorsichtshalber mit der Eigenschaft clear: both, damit sie nicht neben schwebenden Blöcken, sondern immer unter ihnen landen.
<style type="text/css" media="screen">
img { float: right; margin-left: 1em; }
h3 {clear: right; }
</style>
…
<h3><img … width="150" height="163" /> Lorem ipsum</h3>
<p>Lorem ipsum dolor sit amet, … </p>
<h3><img … width="150" height="120" /> In pharetra</h3>
<p>In pharetra. Praesent aliquet neque. … </p>
…