- aktualisiert:
- 05.10.2008
- erstellt:
- 07.02.2007
float: Beispiele
Beispiel 1: ein Textabsatz umfließt ein gefloatetes Element
<p style="float:left; width:150px;>Erster Textabsatz …</p><p>Zweiter Textabsatz …</p>
Darstellung im Browser
Erster Textabsatz mit float:left und einer Breite von 150px.
Zweiter Textabsatz ohne float. Die Inhalte dieses Absatzes umfließen den ersten Absatz. Der Absatz selbst behält die vollständige Breite.
Gefloatete Elemente werden aus dem Dokumentfluss herausgenommen. Nachfolgende normal fließende Elemente verhalten sich, als wäre das gefloatete Element nicht vorhanden. Lediglich die Inhalte der nachfolgenden Elemente umfließen das gefloatete Element.
Beispiel 2: ein Textabsatz fließt zwischen ein rechts und ein links gefloatetes Element
<p style="float:left; width:150px; margin:5px;>Erster Textabsatz …</p><p style="float:right; width:100px; margin:5px;>Zweiter Textabsatz …</p><p>Dritter Textabsatz …</p><p>Vierter Textabsatz …</p>
Darstellung im Browser
Erster Textabsatz mit float:left, einer Breite von 150px und einem margin:5px;.
Zweiter Textabsatz mit float:right, einer Breite von 1005px und einem margin:5px;. Dieser Absatz sitzt rechts.
Dritter Textabsatz ohne float. Die Inhalte dieses Absatzes umfließen den ersten Absatz und den zweiten Absatz. Der Absatz selbst behält die vollständige Breite.
Vierter Textabsatz ohne float. Die Inhalte dieses Absatzes umfließen den ersten Absatz und den zweiten Absatz. Der Absatz selbst behält die vollständige Breite.
Beispiel 3: ein Textabsatz fließt nur neben einem gefloateten Element vorbei
<p style="float:left; width:150px; margin:5px;>Erster Textabsatz …</p><p style="margin-left:150px;">Zweiter Textabsatz …</p>
Darstellung im Browser:
Erster Textabsatz mit float:left, einer Breite von 150px.
Zweiter Textabsatz mit einem margin-left:150px. Man erhält nebeneinander stehende Spalten. Dieser Absatz hält von links einen Abstand in der Breite des gefloateten Elements ein.
Beispiel 4: Ein Textabsatz fließt an zwei links gefloateten Elementen vorbei
<p style="float:left; width:150px; margin:5px;>Erster Textabsatz …</p><p style="float:left; width:100px; margin:5px;>Zweiter Textabsatz …</p><p>Dritter Textabsatz …</p>
Darstellung im Browser:
Erster Textabsatz mit float:left, einer Breite von 150px und einem margin:5px;.
Zweiter Textabsatz mit float:left, einer Breite von 100px und einem margin:5px;. Dieser Absatz sitzt links neben dem ersten gefloateten.
Dritter Textabsatz ohne float. Die Inhalte dieses Absatzes umfließen den ersten Absatz und den zweiten Absatz. Der Absatz selbst behält die vollständige Breite.