Clear xususiyati

clear xususiyati float xususiyati bilan belgilangan boshqa elementlar tomonidan elementni oqimdan chiqishini bekor qiladi. Quyidagi qiymatlarni qabul qilishi mumkin: none (o'zining ta'sirini bekor qiladi), both (float ni o'ng va chap tomondan bir vaqtning o'zida bekor qiladi), left (chap tomondan float ni bekor qiladi), right (o'ng tomondan float ni bekor qiladi).

Sintaksis

cssselector {
  clear: none yoki left yoki right yoki both
}

Misol

Keling, rasmning chap tomondan matn bilan oqimdan chiqishini bekor qilaylik:

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

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

Результат:

Misol

Endi keling, rasmning o'ng tomondan matn bilan oqimdan chiqishini bekor qilaylik:

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

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

Результат:

Misol

Keling, clear xususiyatining o'zining ta'sirini bekor qilaylik:

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

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

Результат:

Shuningdek qarang