Float anwenden und verhindern

#f1 {
float: left;
height: 200px;
width: 200px;
margin-left: 10px;
background-color: #CCCCCC;
}

#f2 {
float: left;
height: 200px;
width: 200px;
margin-left: 10px;
background-color: #CCCCCC;
}

#f3 {
float: left;
height: 200px;
width: 200px;
margin-left: 10px;
background-color: #CCCCCC;
}

#f4 {
float: left;
height: 200px;
width: 200px;
margin-left: 10px;
background-color: #CCCCCC;
}

#f5 {
background-color: #006699;
height: 200px;
width: 200px;
clear: both;
margin: 10px;
}

Im Element f5 wird die Eigenschaft clear mit dem Wert both versehen. Dadurch wird die float Eigenschaft des vorigen Elements aufgehoben.
Man findet es unter Box / frei: beide

Will man das Umfließen eines Textes stoppen, bietet sich folgende Klassendefinition an, die man einem br Tag zuweisen kann:

.clearfloat { font-size: 1px; line-height: 0px; margin: 0px; clear: both; height: 0px; }

index