Skip to content
Latest: The updated version of the Creating NPM Package (React JavaScript) book is out

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.

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.

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.

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.