What is a clearfix? - GeeksforGeeks

29 Oct, 2021
A clearfix is a way for an element to automatically clear or fix its elements so that it does not need to add additional markup. It is generally used in float layouts where elements are floated to be stacked horizontally. If the element is taller than the element containing it then use the overflow property of CSS by setting its value as auto in order to overcome & fix the problem.
Example: From the below image, the logo is not fit into the div element. To fix this problem, there are two ways. The first is by increasing the height of the div block and the second by the use of clearfix CSS property.
We will understand these concepts its implementation through the examples.
Please refer to the CSS Float article to understand the floating concept in CSS.
Example 1: In the code below, the problem is fixed without using the overflow property.
HTML
<!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="https://media.geeksforgeeks.org/wp-content/cdn-uploads/gfg_200X200.png"             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>
Output:
Example 2: In this code, the problem is fixed using the overflow property.
HTML
<!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="https://media.geeksforgeeks.org/wp-content/cdn-uploads/gfg_200X200.png"             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>
Output:
Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.
bhaskargeeksforgeeks
CSS-Misc
Picked
CSS
HTML
Web Technologies
HTML
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
How to insert spaces/tabs in text using HTML/CSS?
Top 10 Projects For Beginners To Practice HTML and CSS Skills
How to update Node.js and NPM to next version ?
How to create footer to stay at the bottom of a Web page?
How to apply style to parent if it has child with CSS?
How to insert spaces/tabs in text using HTML/CSS?
Top 10 Projects For Beginners To Practice HTML and CSS Skills
How to update Node.js and NPM to next version ?
How to set the default value for an HTML <select> element ?
Hide or show elements in HTML using display property