3.4.4.8) 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, das von einem Text im Absatz umflossen werden soll: 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
<head>
<title>Float</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style type="text/css">
/* <![CDATA[ */
* {
   padding: 0;
   margin: 0;
}
body {
   font: 100.01% sans-serif;
}
div {
   background-color: #EBE6E0;
   margin: 10px;
}
.rechts {
   float: right;
}
.links {
   float: left;
}
 
 
 
/* ]]> */
</style>
</head>
<body>
<div><img src="bild.jpg" width="100" height="75" alt="Katze" class="links" /><p>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.</p></div>
<hr />
<div><img src="bild.jpg" width="100" height="75" alt="Katze" class="rechts" /><p>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.</p></div>
 
</body>
</html>

Bild:

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: 

<style type="text/css">
/* <![CDATA[ */
* {
   padding: 0;
   margin: 0;
}
body {
   font: 100.01% sans-serif;
}
.links {
   float: left;
   padding-right: 20px;
}
.rechts {
   float: right;
   padding-left: 20px;  
}
div {
   background-color: #EBE6E0;
   margin: 10px;
}
hr {
   clear: left;
}
/* ]]> */
</style>

Das Problem mit den 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: 

<style type="text/css">
/* <![CDATA[ */
* {
   padding: 0;
   margin: 0;
}
body {
   font: 100.01% sans-serif;
}
.links {
   float: left;
   padding-right: 20px;
}
.rechts {
   float: right;
   padding-left: 20px;  
}
div {
   background-color: #EBE6E0;
   margin: 10px;
   overflow: hidden;
   width: 900px;
}
hr {
   clear: left;
}
/* ]]> */
</style>