Clear-ominaisuus

Ominaisuus clear peruuttaa elementin kellutuksen muiden elementtien ympärillä, joka on määritelty float-ominaisuudella. Se voi saada seuraavat arvot: none (peruuttaa oman toimintansa), both (peruuttaa float-ominaisuuden samanaikaisesti oikealta ja vasemmalta), left (peruuttaa float-ominaisuuden vasemmalta), right (peruuttaa float-ominaisuuden oikealta).

Syntaksi

cssvalitsija {
  clear: none tai left tai right tai both
}

Esimerkki

Perutaan kuvan kellutus tekstin ympärillä vasemmalta:

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

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

Результат:

Esimerkki

Perutaan nyt kuvan kellutus tekstin ympärillä oikealta:

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

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

Результат:

Esimerkki

Perutaan clear-ominaisuuden toiminta:

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

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

Результат:

Katso myös