De clear eigenschap

De eigenschap clear maakt het omvloeien van een element door andere, gedefinieerd door de eigenschap float, ongedaan. Kan de volgende waarden aannemen: none (maakt de werking van zichzelf ongedaan), both (maakt float tegelijkertijd rechts en links ongedaan), left (maakt float links ongedaan), right (maakt float rechts ongedaan).

Syntaxis

cssselector {
  clear: none of left of right of both
}

Voorbeeld

Laten we het omvloeien van de afbeelding door tekst aan de linkerkant ongedaan maken:

html<img class="image" src="bg.png" alt="">
<div class="txt">
  <p>
    tekst tekst tekst tekst tekst tekst
    tekst tekst tekst tekst tekst tekst
    tekst tekst tekst tekst tekst tekst
    tekst tekst tekst tekst tekst tekst
  </p>
</div>

css.image {
  float: left;
  padding-right: 10px;
}
.txt {
  clear: left;
}

Результат:

Voorbeeld

Laten we nu het omvloeien van de afbeelding door tekst aan de rechterkant ongedaan maken:

html<img class="image" src="bg.png" alt="">
<div class="txt">
  <p>
    tekst tekst tekst tekst tekst tekst
    tekst tekst tekst tekst tekst tekst
    tekst tekst tekst tekst tekst tekst
    tekst tekst tekst tekst tekst tekst
  </p>
</div>

css.image {
  float: right;
  padding-right: 10px;
}
.txt {
  clear: right;
}

Результат:

Voorbeeld

Laten we de werking van de eigenschap clear zelf ongedaan maken:

html<img class="image" src="bg.png" alt="">
<div class="txt">
  <p>
    tekst tekst tekst tekst tekst tekst
    tekst tekst tekst tekst tekst tekst
    tekst tekst tekst tekst tekst tekst
    tekst tekst tekst tekst tekst tekst
  </p>
</div>

css.image {
  float: right;
  padding-right: 10px;
}
.txt {
  clear: none;
}

Результат:

Zie ook