Omadus clear

Omadus clear tühistab ühe elemendi voolamise teistest, mis on määratud omadusega float. Võib võtta järgmised väärtused: none (tühistab iseenda tegevuse), both (tühistab float korraga paremalt ja vasakult), left (tühistab float vasakult), right (tühistab float paremalt).

Süntaks

cssselektor {
  clear: none või left või right või both
}

Näide

Tühistame pildi ümber voolava teksti vasakult:

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

Результат:

Näide

Nüüd tühistame pildi ümber voolava teksti paremalt:

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

Результат:

Näide

Tühistame omaduse clear iseenda tegevuse:

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

Результат:

Vaata ka