What is the 'clear' property used for in CSS?

The clear property in CSS is used to control the flow of elements around floating elements. It specifies which side of the element should not be affected by floating elements.

Possible values:

• none: Allows floating on both sides. (default)
• left: Prevents floating on the left side. The element will move down if there is a floating element on the left.
• right: Prevents floating on the right side. The element will move down if there is a floating element on the right.
• both: Prevents floating on both sides. The element will move down if there is a floating element on either side.
• inherit: Inherits the value from the parent element.

Example usage:

.left-float {
  float: left;
  width: 100px;
  height: 100px;
  background-color: lightblue;
}

.content {
  clear: left; /* This element will not float around .left-float */
  background-color: lightgreen;
}

The clear property is often used for the element following a floating element to prevent overlap and to start it below the floating element.