"To float" heißt "schweben". Schweben wie ein Luftballon. Eine schwebende Box macht drei Bewegungen:
Die drei Beispielboxen sind mit float:left ausgerichtet. Box 1 schwebt also rechts nach oben so weit wie es geht und driftet dann nach links so weit wie es geht. Box 2 und 3 machen anschließend dasselbe. Damit die nächste Textbox nicht ebenfalls links floatet, wurde sie mit clear:both (left hätte in diesem Fall genügt) wieder in den normalen Document Flow gelenkt.
Wenn wir nun lediglich statt left right schreiben, passiert dasselbe in der anderen Richtung. Beachten Sie die Reihenfolge der Boxen. Box 4 schwebt zuerst, driftet also ganz nach rechts. Box 5 und 6 folgen.
Wenn eine gefloatete Box im Browserfenster nicht genug Platz findet, springt sie in die nächste Zeile:
Haben die Boxen verschiedene Höhen, kann es zu unvorhergesehenen Fällen kommen. Box 12 schwebt rechts nach oben, stößt unter Box 11, driftet nach links, stößt dort an die höhere Box 10 und bleibt mitten in der Gegend hängen.
Natürlich kann man nicht nur DIVs floaten, sondern auch Bilder. Eigentlich ist auch genau das der klassische Verwendungszweck. Dazu habe ich mir aus der Bilderkiste einige Luftballons geliehen (ich bring sie nachher auch zurück) und diese links gefloatet.
Stünde hier genug Text, gäbe es auch kein Problem. So aber sieht es zwar hier ganz nett aus, es ist aber nicht im Sinne des Erfinders, dass das Bild unten aus der Box rausragt. Warum es das tut? Nun, es ist nicht mehr im Dokumentenfluss und die Textbox weiß nichts von den Ballons.
Es gibt mehrere Möglichkeiten, der Textbox zu sagen, dass sie die gefloateten Ballons umschließen soll. Die einfachste ist die Zuweisung von overflow: hidden an die umgebende Box, also die Textbox.
Der IE braucht aber wieder eine Extrawurst:
* html div#ballonbox {height: 1%}
Zunächst einmal stellt der Selektor * html sicher, dass nur der IE bis Version 6 diese Anweisung überhaupt liest. Man spricht auch vom Sternchen-Hack. Durch die Zuweisung von height:1% merkt nun der IE, dass dieser Bereich wichtig für das Layout ist und stellt ihn korrekt dar. Diesen Trick nennt man Holly-Hack.
Viele Darstellungsprobleme des Internet Explorer lassen sich beheben, indem man einem Element Layout gibt.
Ist genügend Text vorhanden, tritt das vorgenannte Problem gar nicht erst auf. Sobald der Text den unteren Rand der Grafik erreicht hat, fließt er darunter und nimmt wieder die gesamte Breite ein.
Nun folgt etwas Blindtext, um das weitere Verhalten des Absatzes zu demonstrieren.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec fermentum. Fusce vitae lorem. Curabitur sapien mauris, fringilla sed, feugiat et, scelerisque eu, augue. Cras quam erat, lobortis ut, sagittis eu, convallis eu, nunc. Sed odio nibh, venenatis id, rutrum sit amet, dignissim vel, dui. Cras sed purus. Phasellus id quam nec tortor egestas scelerisque. Aenean dui mi, tincidunt eu, nonummy id, euismod laoreet, ligula. Cras eleifend ullamcorper tortor. Praesent vehicula turpis non ipsum. Curabitur tincidunt aliquet urna. Nulla facilisi. Donec a ligula.
Aenean fringilla, purus sodales pharetra volutpat, ipsum libero semper nisi, nec vulputate velit eros vel augue. Morbi libero diam, gravida tristique, egestas vitae, rhoncus non, ipsum. Proin cursus leo non turpis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Sed tincidunt, ante ac cursus feugiat, urna tortor mollis leo, non molestie augue elit nec augue. Donec arcu lorem, porttitor vel, posuere vel, viverra ut, arcu. Suspendisse aliquet, orci id porttitor rutrum, justo elit mattis metus, a pharetra arcu est id sem. Quisque vel orci ac elit rutrum tempor. Donec facilisis, metus sit amet cursus vehicula, lectus tellus posuere nisl, vel ornare magna massa ut ipsum. Praesent consequat tempor dolor. Etiam fermentum lacinia diam. Aenean porta, libero in ultricies pellentesque, augue enim fermentum massa, ut rhoncus nisi magna quis lorem. Aliquam erat volutpat. Mauris nibh leo, adipiscing sit amet, feugiat ut, convallis in, nisl.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec fermentum. Fusce vitae lorem. Curabitur sapien mauris, fringilla sed, feugiat et, scelerisque eu, augue. Cras quam erat, lobortis ut, sagittis eu, convallis eu, nunc. Sed odio nibh, venenatis id, rutrum sit amet, dignissim vel, dui. Cras sed purus. Phasellus id quam nec tortor egestas scelerisque. Aenean dui mi, tincidunt eu, nonummy id, euismod laoreet, ligula. Cras eleifend ullamcorper tortor. Praesent vehicula turpis non ipsum. Curabitur tincidunt aliquet urna. Nulla facilisi. Donec a ligula.