Својство 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>
    text text text text text text
    text text text text text text
    text text text text text text
    text text text text text text
  </p>
</div>

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

Результат:

Пример

Сада хајде да поништимо обавијање слике текстом са десне стране:

html<img class="image" src="bg.png" alt="">
<div class="txt">
  <p>
    text text text text text text
    text text text text text text
    text text text text text text
    text text text text text text
  </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>
    text text text text text text
    text text text text text text
    text text text text text text
    text text text text text text
  </p>
</div>

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

Результат:

Види још