Float

====== Float- und Clear-Eigenschaft ====== Neben den verschiedenen Positionierungsarten gibt es eine weitere Möglichkeit, die Darstellung von Webseiten zu verändern. ===== Float: Umfließen ===== Float setzt die für Block-Elemente geltende Regel, dass diese in einer neuen Zeile beginnen außer Kraft. Es bewirkt also, dass keine Veränderung des normalen Textflusses stattfindet. Das geschieht, indem das betroffene Element von den anderen umflossen wird. Dem Element, das umflossen werden soll, weißt man die Regel float: left (für links umfließen) oder float: right (für rechts umfließen) zu. Der Standardwert ist float: none, also nicht umfließen. Folgendes Beispiel zeigt ein Bild, dass von einem Text im Absatz umflossen werden soll: Float

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

==== Clear: Umfließen beenden ==== Das Problem ist nun, dass das Bild nicht nur von dem einen Absatz umflossen wird, sondern von allen folgenden Elementen. Das Umfließen muss also nach dem gewünschten Element wieder mit der Regel clear: left, clear: right oder clear: both stoppen. Die clear-Regel muss dem Element zugewiesen werden, die das umflossene Element als letztes umfließen soll. Nun das gleiche Beispiel wie oben, nur mit der Anwendung von clear – Es muss nur der CSS-Code geändert werden: Das Problem mit dem unterschiedlichen Höhen Wie man im BSP sieht, gibt es noch ein Problem: Der Absatz wurde durch den DIV-Block grau hinterlegt, allerdings nicht so hoch wie das Bild, obwohl es im selben DIV liegt. Um das Problem zu beseitigen gibt es einen einfachen Trick: overflow: hidden – dem DIV muss man dazu jedoch eine fixe Breite zuweisen. Beispiel vollendet - Es muss nur der CSS-Code geändert werden: