CSS clear property specifies whether the floating element(s) should be allowed on the left or right side of an element or not.
If an element has clear: left;, it means that no floating element is allowed on the left side of the element. See the example below:
Example:
div{
float: left;
}
p{
clear: left;
}
Similarly, If an element has clear: right;, it means that no floating element is allowed on the right side of the element. See the example below:
Example:
div{
float: right;
}
p{
clear: right;
}
In the similar fashion, if an element has clear: both;, it means that no floating element is allowed on the left or right side of the element. Try out the example below to see how it works:
Example:
p{
clear: both;
}
.div1{
float: left;
}
.div2{
float: right;
}
CSS Syntax
The clear property has the following syntax:
clear: none|left|right|both|initial|inherit;
Property Values
The clear property accepts the following values:
| none | Floating elements are allowed on both sides(left and right). This is the default value. |
| left | No floating element(s) are allowed on the left side of the element. |
| right | No floating element(s) are allowed on the right side of the element. |
| both | Floating elements are not allowed on either side(left or right). |
| initial | Sets the clear property to its default value(none). |
| inherit | Inherits the clear property from the parent element. |
General Info
| Default Value | none |
| Inherited | No |
| JavaScript Usage | element.style.clear = “left” |
