Clear häsiýeti

Clear häsiýeti, float häsiýeti bilen kesgitlenen bir element başgalar tarapyndan gurluşygy aýyrýar. Aşakdaky gymmatlyklary kabul edip biler: none (öz özüniň täsirini aýyrýar), both (float-y sagdan we soldan bir wagtda aýyrýar), left (soldaky float-y aýyrýar), right (sagdaky float-y aýyrýar).

Sintaksis

cssselektor {
  clear: none ýa-da left ýa-da right ýa-da both
}

Mysal

Geliň, suratyň tekstiň soldan gurluşygyny aýyralyň:

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

Результат:

Mysal

Indi bolsa, suratyň tekstiň sagdan gurluşygyny aýyralyň:

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

Результат:

Mysal

Geliň, clear häsiýetiniň özüniň täsirini aýyralyň:

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

Результат:

Şeýle-de göz aňyryň

  • elementiň aşaky gyrasynyň ýerleşýşini kesgitleýän, bottom häsiýeti
  • elementiň ýokarky gyrasynyň ýerleşýşini kesgitleýän, top häsiýeti
  • elementiň çep gyrasynyň ýerleşýşini kesgitleýän, left häsiýeti
  • elementiň sag gyrasynyň ýerleşýşini kesgitleýän, right häsiýeti
  • bir-inji elementden soň ýerleşýşini kesgitleýän, ::backdrop psewdoelementi
  • tablisa at başlygynyň ýerleşýşini kesgitleýän, caption-side häsiýeti