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

Результат:

Смотрите также