clear

Anonymous contributor's avatar
Anonymous contributor
Anonymous contributor's avatar
Anonymous contributor
Published Jul 31, 2021Updated Jan 18, 2024
Contribute to Docs

Specifies whether an element coming after a floated element should be moved down or not.

Syntax

clear: value;

The value for the clear attribute can be:

  • none: The element is not moved down to clear past floating elements (the default).
  • left: The element is moved down to clear past left floated elements.
  • right: The element is moved down to clear past right floated elements.
  • both: The element is moved down to clear past both left and right floated elements.

Example 1

Making an img element move down a left floated h1 element.

.div1 h1 {
float: left;
}
.div1 img {
clear: left;
}

The image below matches the code example. The h1 element is floated to the left due to float: left. The img element is then moved under the h1 element due to clear: left.

css-display-clear-example

All contributors

Looking to contribute?

Learn CSS on Codecademy