თვისება 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;
}

Результат:

იხილეთ აგრეთვე