Open In App

Explain the purpose of clearing floats in CSS

Improve
Improve
Like Article
Like
Save
Share
Report

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. 

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:



Last Updated : 25 Aug, 2021
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads