clear

The clear property controls how elements next to floated elements should flow.

Syntax

This property designates what should happen with an element that is next to an element that has a float set.

img.ex {
  float: left;
}

img.ex::after {
  clear: left;
}

Values

none
Default value. The element is not pushed below floated elements.

left
The element is pushed below elements that are floated left.

right
The element is pushed below floated elements that are floated right.

both
The element is pushed below elements that are floated both left and right.

initial
Sets the property to its default value.

inherit
Inherits this property’s value from its parent item.

Browser Compatibilty

Demos

Have a code example of clear? Submit a codepen.io demo and we'll showcase it here ↴