CSS clear Property – How to Clear Items from Floating Elements

clear specifies whether browsers should move the selected block-level element below its preceding floating element.

In other words, the clear property says if browsers should clear away the selected block-level element from its preceding floating element’s side.

Note

• Preceding means to come before.
• You can apply the clear property to floating and non-floating elements.

Examples of the CSS clear Property

Below are some examples of how the CSS clear property works.

Note the following:

• clear: none will not move the selected block-level element below its preceding floating element. This value is the default.
• clear: right moves the selected block-level element below its preceding floating element on its right side.
• clear: left moves the selected block-level element below its preceding floating element on its left side.
• clear: both moves the selected block-level element below its preceding floating elements on its right and left sides.
• clear: initial sets the clear property to its default value.
• clear: inherit inherits its parent element’s clear property’s values.

Clear none of the image’s sides

CSS

div {
  border: 1px solid black;
  padding: 15px;
}

.first-p {
  color: #0a2f35;
  float: left;
  margin: 0;
  width: 25%;
}

.second-p {
  color: #f56038;
  float: right;
  margin: 0;
  width: 25%;
}

img {
  display: block;
  clear: none;
  width: 50%;
}

HTML

<div>
  <p class="first-p">
    Far far away, behind the word mountains, far from the countries Vokalia and
    Consonantia, there live the blind texts. Separated they live in
    Bookmarksgrove right at the coast of the Semantics, a large language ocean.
    A small river named Duden flows by their place and supplies it with the
    necessary regelialia.
  </p>
  <p class="second-p">
    It is a paradisematic country, in which roasted parts of sentences fly into
    your mouth. Even the all-powerful Pointing has no control about the blind
    texts it is an almost unorthographic life One day however a small line of
    blind text by the name of Lorem Ipsum decided to leave for the far World of
    Grammar. The Big Oxmox advised her not to do so, because there were
    thousands of bad Commas, wild Question Marks and devious Semikoli, but the
    Little Blind Text didn't listen. She packed her seven versalia, put her
    initial into the belt and made herself on the way. When she reached the
    first hills of the Italic Mountains, she had a last view back on the skyline
    of her hometown Bookmarksgrove, the headline of Alphabet Village and the
    subline of her own road, the Line Lane. Pityful a rethoric question ran over
    her cheek, then
  </p>
  <img
    src="https://cdn.pixabay.com/photo/2020/02/05/13/02/waterfalls-4821153_960_720.jpg"
    alt="Waterfall"
  />
</div>

Try it on StackBlitz

The snippet above used the clear property to specify that browsers should not move the image below its preceding floating elements.

Note

An <img> element is in-line by default. But we used the display: block declaration to make it a block-level element.

CodeSweetly ads

Clear the image’s left side

CSS

div {
  border: 1px solid black;
  padding: 15px;
}

.first-p {
  color: #0a2f35;
  float: left;
  margin: 0;
  width: 25%;
}

.second-p {
  color: #f56038;
  float: right;
  margin: 0;
  width: 25%;
}

img {
  display: block;
  clear: left;
  width: 50%;
}

HTML

<div>
  <p class="first-p">
    Far far away, behind the word mountains, far from the countries Vokalia and
    Consonantia, there live the blind texts. Separated they live in
    Bookmarksgrove right at the coast of the Semantics, a large language ocean.
    A small river named Duden flows by their place and supplies it with the
    necessary regelialia.
  </p>
  <p class="second-p">
    It is a paradisematic country, in which roasted parts of sentences fly into
    your mouth. Even the all-powerful Pointing has no control about the blind
    texts it is an almost unorthographic life One day however a small line of
    blind text by the name of Lorem Ipsum decided to leave for the far World of
    Grammar. The Big Oxmox advised her not to do so, because there were
    thousands of bad Commas, wild Question Marks and devious Semikoli, but the
    Little Blind Text didn't listen. She packed her seven versalia, put her
    initial into the belt and made herself on the way. When she reached the
    first hills of the Italic Mountains, she had a last view back on the skyline
    of her hometown Bookmarksgrove, the headline of Alphabet Village and the
    subline of her own road, the Line Lane. Pityful a rethoric question ran over
    her cheek, then
  </p>
  <img
    src="https://cdn.pixabay.com/photo/2020/02/05/13/02/waterfalls-4821153_960_720.jpg"
    alt="Waterfall"
  />
</div>

Try it on StackBlitz

The snippet above used the clear property to move the image below its preceding floating element on its left side.

Clear the image’s right side

CSS

div {
  border: 1px solid black;
  padding: 15px;
}

.first-p {
  color: #0a2f35;
  float: left;
  margin: 0;
  width: 25%;
}

.second-p {
  color: #f56038;
  float: right;
  margin: 0;
  width: 25%;
}

img {
  display: block;
  clear: right;
  width: 50%;
}

HTML

<div>
  <p class="first-p">
    Far far away, behind the word mountains, far from the countries Vokalia and
    Consonantia, there live the blind texts. Separated they live in
    Bookmarksgrove right at the coast of the Semantics, a large language ocean.
    A small river named Duden flows by their place and supplies it with the
    necessary regelialia.
  </p>
  <p class="second-p">
    It is a paradisematic country, in which roasted parts of sentences fly into
    your mouth.
  </p>
  <img
    src="https://cdn.pixabay.com/photo/2020/02/05/13/02/waterfalls-4821153_960_720.jpg"
    alt="Waterfall"
  />
</div>

Try it on StackBlitz

The snippet above used the clear property to move the image below its preceding floating element on its right side.

CodeSweetly ads

Clear both sides of the image

CSS

div {
  border: 1px solid black;
  padding: 15px;
}

.first-p {
  color: #0a2f35;
  float: left;
  margin: 0;
  width: 25%;
}

.second-p {
  color: #f56038;
  float: right;
  margin: 0;
  width: 25%;
}

img {
  display: block;
  clear: both;
  width: 50%;
}

HTML

<div>
  <p class="first-p">
    Far far away, behind the word mountains, far from the countries Vokalia and
    Consonantia, there live the blind texts. Separated they live in
    Bookmarksgrove right at the coast of the Semantics, a large language ocean.
    A small river named Duden flows by their place and supplies it with the
    necessary regelialia.
  </p>
  <p class="second-p">
    It is a paradisematic country, in which roasted parts of sentences fly into
    your mouth.
  </p>
  <img
    src="https://cdn.pixabay.com/photo/2020/02/05/13/02/waterfalls-4821153_960_720.jpg"
    alt="Waterfall"
  />
</div>

Try it on StackBlitz

The snippet above used the clear property to move the image below its preceding floating elements on its right and left sides.