How to Clear Floats with the "clearfix" hack?

Last Updated : 07 Apr, 2025

Adjusting the elements in the application is important, especially when dealing with floating elements that can disrupt the layout. In this article, we will explore two different approaches to clear floats with the clearfix hack.

Below are the possible approaches:

Table of Content

Using a Separate Clearfix Class
Using the Clearfix Class with Overflow Hidden

Using a Separate Clearfix Class

In this approach, we are using a separate CSS class called "clearfix" with the "clearfix::after" pseudo-element to clear floats. This method makes sure that elements within the "clearfix" container are properly cleared from floated elements, preventing layout issues caused by floating elements.

Example: The below example uses Separate Clearfix Class to clear floats with the "clearfix" hack.

HTML

<!DOCTYPE html>
<html>

<head>
    <style>
        div {
            border: 3px solid #ff0000;
            padding: 5px;
        }

        .img1 {
            float: right;
        }

        .img2 {
            float: right;
        }

        .clearfix::after {
            content: "";
            display: table;
            clear: both;
        }

        .green-text {
            color: green;
        }
    </style>
</head>

<body>

    <h1 class="green-text">GeeksforGeeks</h1>
    <h3>Approach 1: Using a Separate Clearfix Class</h3>

    <div class="clearfix">
        <img class="img2" 
             src=
"https://media.geeksforgeeks.org/wp-content/uploads/20240521104847/GFGImg.png"
            alt="GeeksforGeeks" width="170" height="170">
        <h3 class="green-text">GeeksforGeeks</h3>
        <h3>Courses, Articles, and More</h3>
        <p>We can fix this by adding a clearfix
          class with overflow: auto; to the 
          containing element:</p>
    </div>

</body>

</html>

Output:

OP1-min — Clearing float using the Clearfix hack

Using the Clearfix Class with Overflow Hidden

In this approach, we are using the "clearfix" class with the CSS property "overflow: hidden;" to clear floats. This method creates a block formatting context, causing the containing element to expand and encompass its floated children, effectively clearing the floats without altering the layout.

Example: The below example uses Clearfix Class with Overflow Hidden to clear floats with the "clearfix" hack.

HTML

<!DOCTYPE html>
<html>

<head>
    <style>
        body {
            font-family: Arial, sans-serif;
        }

        div {
            border: 3px solid #4CAF50;
            padding: 10px;
            margin-bottom: 20px;
        }

        .img1 {
            float: right;
        }

        .img2 {
            float: right;
        }

        .clearfix {
            overflow: hidden;
        }

        .green-text {
            color: green;
        }
    </style>
</head>

<body>

    <h1 class="green-text">GeeksforGeeks</h1>
    <h3>Approach 2: Using the Clearfix 
      Class with Overflow Hidden</h3>
    <h4>With Clearfix:</h4>


    <div class="clearfix">
        <img class="img2" 
             src=
"https://media.geeksforgeeks.org/wp-content/uploads/20240521104847/GFGImg.png"
            alt="GeeksforGeeks" 
             width="170"
             height="170">
        <p>GeeksforGeeks</p>
        <h4>Courses, Articles, and More</h4>
        <p>We can fix this by adding a clearfix
          class with overflow: hidden; to the
          containing element.</p>
    </div>

    <h4>Without Clearfix:</h4>
    <p>This image is floated to the right. 
      It is also taller than the element 
      containing it, so it overflows outside of
        its container:</p>
    <div>
        <img class="img1" 
             src=
"https://media.geeksforgeeks.org/wp-content/uploads/20240521104847/GFGImg.png"
            alt="GeeksforGeeks" 
             width="170" 
             height="170">
        <p>GeeksforGeeks</p>
        <h4>Courses, Articles, and More</h4>
    </div>

</body>

</html>

Output:

Screenshot-2024-05-21-at-11-00-16-Screenshot — Clearing float using clearfix class along with overflow hidden.

How to make Elements Float to Center?

gauravggeeksforgeeks

Improve

Article Tags :

How to Clear Floats with the "clearfix" hack?

Using a Separate Clearfix Class

Using the Clearfix Class with Overflow Hidden

Similar Reads

Thank You!

What kind of Experience do you want to share?