Open In App

How CSS clearfix property useful ?

Improve
Improve
Like Article
Like
Save
Share
Report

In this article, we will see what is clearfix CSS property and how it is useful, along with understanding the different ways of implementing it through the examples.

Assigning a number of CSS properties to a parent element that will wrap its floating children is a common technique in CSS float-based layouts. This technique is usually implemented using a class called clearfix. Hence, it is not a CSS property but a simple hack that allows a container to wrap its floating children.

Syntax: 

.clearfix{
 ...
}

Clearfix is generally used when floating elements are needed to be stacked horizontally. Without clearfix, the container with floated children will collapse like its children are positioned absolutely like the shown below:

 

Implementing the clearfix can be done in multiple ways such as by using the overflow property that helps to control the overflow of the content from the element’s box. The display property also helps by specifying the display behavior of an element, i.e, it depends on the type of rendering box the element contains. We will understand all those concepts sequentially.

Using overflow-property: It is the most common implementation of clearfix by assigning overflow-property with a value anything but visible because it will create a new block formatting context(BFC)

Syntax: 

.clearfix{
    overflow: auto | hidden | scroll;
}

Using display-property: We can also implement clearfix by assigning display-property to inline-block or flow-root. This will also create a new BFC.

Syntax: 

.clearfix{
    display: inline-block | flow-root;
}

Example 1: This code example demonstrates the problem when we doesn’t use a clearfix.

HTML




<!DOCTYPE html>
<html>
  
<head>
    <style>
        .container {
            border: 4px solid black;
            width: 650px;
            font-size: 24px;
            padding: 20px;
        }
  
        .box {
            float: left;
            font-size: 24px;
            height: 150px;
            width: 250px;
            color: white;
            background: green;
            text-align: center;
            padding: 20px;
        }
    </style>
</head>
  
<body>
    <center>
        <h1 style="color:green">
            GeeksforGeeks
        </h1>
        <h3>Our container without a clearfix</h3>
        <div class="container">
            Container with 20px padding
            <span class="box">
                Floating Child
            </span>
        </div>
    </center>
</body>
  
</html>


Output: 

 

Example 2: The following example demonstrates how overflow-property is used to solve the above problem.

HTML




<!DOCTYPE html>
<html>
  
<head>
    <style>
        .clearfix {
            overflow: hidden;
            border: 4px solid black;
            width: 650px;
            font-size: 24px;
            padding: 20px;
        }
  
        .box {
            float: left;
            font-size: 24px;
            height: 150px;
            width: 250px;
            color: white;
            background: green;
            text-align: center;
            padding: 20px;
        }
    </style>
</head>
  
<body>
    <center>
        <h1 style="color:green">
            GeeksforGeeks
        </h1>
  
        <h3>
            Our container with a clearfix 
            (using overflow-property)
        </h3>
          
        <div class="clearfix">
            Container with overflow:hidden;
            <span class="box">
                Floating Child
            </span>
        </div>
    </center>
</body>
  
</html>


Output: 

 

Example 3: The following example demonstrates how display-property is used to solve the above problem.

HTML




<!DOCTYPE html>
<html>
  
<head>
    <style>
        .clearfix {
            display: inline-block;
            border: 4px solid black;
            width: 650px;
            font-size: 24px;
            padding: 20px;
        }
  
        .box {
            float: left;
            font-size: 24px;
            height: 150px;
            width: 250px;
            color: white;
            background: green;
            text-align: center;
            padding: 20px;
        }
    </style>
</head>
  
<body>
    <center>
        <h1 style="color:green">
            GeeksforGeeks
        </h1>
  
        <h3>
            Our container with a clearfix 
            (using display-property)
        </h3>
          
        <div class="clearfix">
            Container with display:inline-block;
            <span class="box">
                Floating Child
            </span>
        </div>
    </center>
</body>
  
</html>


Output:

 



Last Updated : 11 Jul, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads