Skip to main content

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.

info
  • 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​

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

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.

Buy CSS Flexbox book

Clear the image's left side​

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

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​

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

Try it on StackBlitz

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

Creating NPM Package Book Now Available at Amazon

Clear both sides of the image​

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

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.

Overview​

This article discussed what a CSS clear property is. We also used examples to see how it works.

Tags:
Last updated on by Oluwatobi Sofela