Egenskaben clear

Egenskaben clear annullerer omflydning af et element af andre, som er angivet af egenskaben float. Kan tage følgende værdier: none (annullerer sin egen handling), both (annullerer float samtidigt fra højre og venstre), left (annullerer float fra venstre), right (annullerer float fra højre).

Syntaks

cssselektor {
  clear: none eller left eller right eller both
}

Eksempel

Lad os annullere omflydning af billedet med tekst fra venstre:

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

Результат:

Eksempel

Lad os nu annullere omflydning af billedet med tekst fra højre:

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

Результат:

Eksempel

Lad os annullere handlingen af selve egenskaben clear:

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

Результат:

Se også