Хосияти 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;
}

Результат:

Инчунин нигаред