What Is Clearfix In Css Examples

Posted By Bajarangi soft , Posted On 09-10-2020

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.

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 1:
In the code below problem is fixed without using overflow property.

<!DOCTYPE html>
<html>
<head>

    <!-- css code to show the working
    of this property -->
    <style>
        div {
            border: 3px solid #dc9d2f;
            padding: 10px;
            height: 200px;
            text-align:justify;
        }
        img {
            float: right;
        }
    </style>
</head>
<body>
<div>
    <img src=
                 "b1.jpg"
         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>

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

<!DOCTYPE html>
<html>
<head>

    <!-- css code to show the working
    of this property -->
    <style>
        div {
            border: 3px solid #dc9d2f;
            padding: 10px;
            text-align:justify;
        }
        img {
            float: right;
        }
        .gfg {
            overflow:auto;
        }
    </style>
</head>
<body>
<div class="gfg">
    <img src= "logo.jpg"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>