The clear property

The clear property cancels flowing around one element by another, specified by the float property. It can take the following values: none (cancels the effect of itself), both (cancels float simultaneously on the right and left), left (cancels float on the left), right (cancels float on the right)

Syntax

cssselector {
  clear: none or left or right or both
}

Example

Let's cancel the text from flowing around the image left side:

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;
}

Результат:

Example

Now let's cancel flowing around of image by text from right:

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;
}

Результат:

Example

Let's cancel an effect of the clear property itself:

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;
}

Результат:

See also