Clear қасиеті

clear қасиеті float қасиеті арқылы берілген бір элементтің басқаларымен айналысуын жояды. Келесі мәндерді қабылдай алады: none (өз әрекетін жояды), both (float әрекетін бір мезгілде оң жақтан және сол жақтан жояды), left (float әрекетін сол жақтан жояды), right (float әрекетін оң жақтан жояды).

Синтаксис

cssселектор {
  clear: none немесе left немесе right немесе both
}

Мысал

Суреттің сол жағынан мәтінмен айналысуын жояйық:

html<img class="image" src="bg.png" alt="">
<div class="txt">
  <p>
    мәтін мәтін мәтін мәтін мәтін мәтін
    мәтін мәтін мәтін мәтін мәтін мәтін
    мәтін мәтін мәтін мәтін мәтін мәтін
    мәтін мәтін мәтін мәтін мәтін мәтін
  </p>
</div>

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

Результат:

Мысал

Енді суреттің оң жағынан мәтінмен айналысуын жояйық:

html<img class="image" src="bg.png" alt="">
<div class="txt">
  <p>
    мәтін мәтін мәтін мәтін мәтін мәтін
    мәтін мәтін мәтін мәтін мәтін мәтін
    мәтін мәтін мәтін мәтін мәтін мәтін
    мәтін мәтін мәтін мәтін мәтін мәтін
  </p>
</div>

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

Результат:

Мысал

clear қасиетінің өз әрекетін жояйық:

html<img class="image" src="bg.png" alt="">
<div class="txt">
  <p>
    мәтін мәтін мәтін мәтін мәтін мәтін
    мәтін мәтін мәтін мәтін мәтін мәтін
    мәтін мәтін мәтін мәтін мәтін мәтін
    мәтін мәтін мәтін мәтін мәтін мәтін
  </p>
</div>

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

Результат:

Сондай-ақ қараңыз