CSS clear Property

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:

noneFloating elements are allowed on both sides(left and right). This is the default value.
leftNo floating element(s) are allowed on the left side of the element.
rightNo floating element(s) are allowed on the right side of the element.
bothFloating elements are not allowed on either side(left or right).
initialSets the clear property to its default value(none).
inheritInherits the clear property from the parent element.

General Info

Default Valuenone
InheritedNo
JavaScript Usageelement.style.clear = “left”

Author

  • Manoj Kumar

    Hi, My name is Manoj Kumar. I am a full-stack developer with a passion for creating robust and efficient web applications. I have hands-on experience with a diverse set of technologies, including but not limited to HTML, CSS, JavaScript, TypeScript, Angular, Node.js, Express, React, and MongoDB.

Leave a Comment