Свойство 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;
}

Результат:

Вижте също