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.

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.

Overview

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

Everything you need to sell courses, webinars, downloads, and community.