The clear CSS property sets whether an element must be moved below (cleared) floating elements that precede it. The clear property applies to floating and non-floating elements.

Why do we use clear both?

The “clear: both” means floating the elements are not allowed to float on both sides. It is used when no need of any element float on the left and right side as related to the specified element and wanted the next element only shown below.

What are the values of clear property?

The clear property is used to specify whether an element should be next to floating elements or it should be below them (clear). We can apply the clear property to both floating and non-floating elements. This property has four values: none, left, right, and both. “None” is the default value.