Уласцівасць 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;
}

Результат:

Глядзіце таксама