Position Float

Fliessende Elemente

Die CSS-Eigenschaft float nimmt Elemente aus dem normalen Fluss des HTML Dokumentes, ähnlich wie absolut positionierte Elemente. Im Gegensatz zu absolut positionierten Elementen, werden Floats direkt nach dem letzten vorausgehenden Block-Element angeordnet.
Alle Elemente können "floaten": Absätze, <div>s, Listen, Tabellen, Grafiken, Inline-Elemente wie <span> oder <strong>. Schwebende Element mit der Eigenschaft float können an jeder beliebigen Stelle des Dokuments auftauchen.
Mit float kann man bestimmen, dass nachfolgende Elemente das aktuelle Element oder den aktuellen Bereich umfliessen.

Diese Attribute sind möglich

left Das Element steht links und wird rechts davon vom nächsten Elementen umflossen.
right Das Element steht rechts und wird links davon umflossen.
none Kein Umfliessen (default/Normaleinstellung).

WICHTIG
Wenn ein Element die Angabe float hat, muss in CSS2 auch eine Angabe width definieren sein.

Clear

Wenn mit float einen Textumfluss definiert ist, will man vielleicht nur zwei oder drei Zeilen Text neben einem umflossenen Element. (Beispiel Bild und Text)
Der nachfolgende Text, oder weitere Elemente sollen unterhalb des umflossenen Elements folgen.

Mit clear kann float abgebrochen und die Fortsetzung unterhalb des umflossenen Elements oder Bereichs fortgesetzt werden.

Diese Attribute sind möglich

clear: left Erzwingt bei float:left die Fortsetzung unterhalb.
clear: right Erzwingt bei float:right die Fortsetzung unterhalb.
clear: both Erzwingt in jedem Fall die Fortsetzung unterhalb.
float: none Das float wird nicht unterbrochen. (default/Normaleinstellung).