CSS clear Property

The clear property is used to specify which side of floating elements are not allowed to float. It sets or returns the position of the element in relation to floating objects. If the element can fit horizontally in the space next to another element that is floated, it will. 

Syntax:

clear: none|left|right|both|inline-start|inline-end|initial;

Property values:

• none: It has a default value. It allows elements are float on both sides. 
• left: This property specifies that elements are not allowed to Float on the left side in relation to other elements. 
• both: It means floating elements are not allowed to float on both sides. 
• right: It means elements are not allowed to float on the right side. 
• initial: It sets the property to its default value.

Example: In this example, we are using clear: none property.

Output:

👁 CSS clear Property example output

Example: In this example, we are using clear: left property.

Output:

👁 CSS clear Property example output

Example: In this example, we are using clear: right property.

Output:

👁 CSS clear Property example output

Example: In this example, we are using clear: both property.

Output:

👁 CSS clear Property Example output

Example: In this example, we are using clear: initial property.

Output:

👁 CSS clear Property example output

Supported Browsers: The browsers supported by clear property are listed below:

• Google Chrome
• Edge
• Firefox
• Opera
• Safari