What is a clearfix?

A clearfix is a way for an element to automatically clear or fix its elements, so that do not need to add additional markup. It is generally used in float layout where elements are floated to be stacked horizontally. If the element is taller than the element containing it then use overflow property of CSS to overcome this.

Example:

In the above image logo is not fit into the div element. To fix this problem there are two ways. First is by increasing the height of the div block and second by the use of clearfix CSS property.

Example 1: In the code below problem is fixed without using overflow property.

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
    <head>
          
        <!-- css code to show the working 
        of this property -->
        <style>
            div {
                border: 3px solid green;
                padding: 10px;
                height: 200px;
                text-align:justify;
            }
            img {
                float: right;
            }
        </style>
    </head>
    <body>
        <div>
        <img src=
        alt="Pineapple" width="200" height="200">
        GATE(Graduate Aptitude Test in Engineering) is one the most 
        important and in-demand entrance exam for engineering graduates
        in our country. M.Tech. in Computer Science is one of the most
        demanding courses at prestigious institutes like IISCs and IITs.
        GATE(Graduate Aptitude Test in Engineering) is one of the ways
        to get into these top institutes. Every year around 10 Lakh 
        candidates apply for GATE exam and very few of them manage to
        ace the exam with good score. So the competition is clearly 
        very tough and simply preparing without any strategy will make
        it difficult to land you into IISCs and IITs. </div>
    </body>
</html>                    

chevron_right


Output:

Example 2: In this code, the problem is fixed using overflow property.

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
    <head>
          
        <!-- css code to show the working 
        of this property -->
        <style>
            div {
                border: 3px solid green;
                padding: 10px;
                text-align:justify;
            }
            img {
                float: right;
            }
            .gfg {
                overflow:auto;
            }
        </style>
    </head>
    <body>
        <div class = "gfg">
        <img src=
        alt="Pineapple" width="200" height="200">
        GATE(Graduate Aptitude Test in Engineering) is one the most 
        important and in-demand entrance exam for engineering graduates
        in our country. M.Tech. in Computer Science is one of the most
        demanding courses at prestigious institutes like IISCs and IITs.
        GATE(Graduate Aptitude Test in Engineering) is one of the ways
        to get into these top institutes. Every year around 10 Lakh 
        candidates apply for GATE exam and very few of them manage to
        ace the exam with good score. So the competition is clearly 
        very tough and simply preparing without any strategy will make
        it difficult to land you into IISCs and IITs. </div>
    </body>
</html>                    

chevron_right


Output:



My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.




Article Tags :
Practice Tags :


Be the First to upvote.


Please write to us at contribute@geeksforgeeks.org to report any issue with the above content.