Explain the purpose of clearing floats in CSS
In this article, we will learn to clear float and the purpose of clearing floats in CSS. Before diving into this topic, we will know the float property in CSS. The float property in CSS is used to change the normal flow of an element. The float property defines where should be an element place container’s left or right side.
Purpose of clearing floats in CSS: We clear the float property to control the floating elements by preventing overlapping. On our webpage, if an element fits horizontally next to the floated elements, unless we apply the clear property same as float direction then the elements will be a move below the floated elements.
- none: It is the default value of the clear property. After using this value the element will not be pushed left or right floated elements.
- right: This value pushes the element right below the floated elements.
- left: This value pushes the element left below the floated elements.
- both: This value pushes the element left and right to the floated elements.
- initial: Change the properties to their default value.
- inherit: Inherit the floating properties to their parent element.
The best way to understand the concept of clear is by using an example.
Example 1: We have floated an image on the left of a text as shown below. We can see that the element is pushed left to the image because of using the float property.
Example 2: Once we use clear property with left value, the element will be pushed below the image.