clear

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;
}

<div class="box">

Ik ben lekker aan het float'en!

</div>
<section>

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?

</section>

.box {
  float: left;
  width: 200px;
  height: 100px;
  margin: 1em;
}
.after-box {
  clear: left;
}

<div class="box">

Ik ben lekker aan het float'en!

</div>
<section class="after-box">

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.

</section>

  • Creative Commons License
  • Ads by Bocoup