Leer CSS Layout
De clear property is belangrijk voor het controleren van het gedrag van floats. Vergelijk de volgende twee voorbeelden:
<div class="box">...</div>
<section>...</section>.box {
float: left;
width: 200px;
height: 100px;
margin: 1em;
}
Ik ben lekker aan het float'en!
</div>
In dit geval is het section element eigenlijk na de div. Hoewel de div ge-float is naar links, is het volgende aan de hand: de tekst in de section wordt rondom de div ge-float en de section omhelst het geheel. Wat als we nu de section na het floated element zouden willen tonen?
.box {
float: left;
width: 200px;
height: 100px;
margin: 1em;
}
.after-box {
clear: left;
}
Ik ben lekker aan het float'en!
</div>
Doordat clear gebruikt wordt, hebben we nu het section element onder de floated div kunnen krijgen. Om elementen te clear'en die links ge-float zijn maak je gebruik van de left waarde. Daarnaast zijn er ook nog right en both als waardes.
