Skip to content
Related Articles

Related Articles

Improve Article
Save Article
Like Article

Explain the purpose of clearing floats in CSS

  • Last Updated : 25 Aug, 2021

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. 

Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.

Syntax:

clear: none|right|left|both|initial|inherit;

Property values:



  • 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. 

HTML




<!DOCTYPE html>
<html>
  
<head>
    <style>
        img {
            float: left;
        }
    </style>
</head>
  
<body>
    <h1>The clear Property</h1>
    <img src=
        width="100" height="132" />
  
    <p>
        The content will be shown 
        left to the image.
    </p>
</body>
  
</html>

Output:

Example 2: Once we use clear property with left value, the element will be pushed below the image.

HTML




<!DOCTYPE html>
<html>
  
<head>
    <style>
        img {
            float: left;
        }
  
        p {
            clear: left;
        }
    </style>
</head>
  
<body>
    <h1>The clear Property</h1>
    <img src=
        width="100" height="132" />
  
    <p>
        The content will be shown 
        left to the image.
    </p>
</body>
  
</html>

Output:




My Personal Notes arrow_drop_up

Start Your Coding Journey Now!