CSS - Clearfix

Quiz

Clearfix is a technique to ensure that a container properly encloses and contains floated elements ( such as images ) within it. It prevents layout issues by adding an empty element to the container, which clears both left and right floats.

Float Left

Float Right

Following Content

How Clearfix Works?

To understand the working of clearfix, first you need to know about float property and floated elements. In CSS, floated elements are the elements that are removed from normal document flow and positioned left or right of their containing block. For example, sometimes an image element will be positioned right side in container element and texts will be wrapped around it.

Since the floated elements are removed from normal document flow, the parent container may collapse and not able to contain the floated child. Hence the clearfix technique is used to ensure that the parent element properly wraps around the floated elements. Here is the basic CSS code of clearfix:

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

Above syntax is following the below mentioned rules.

content: ""This is used to generate a pseudo-element.
display: table This makes the pseudo-element a block element and ensures that it occupies the full width of the parent.
clear: both This clears the float from both sides (left and right).

Clearfix helps to prevent the problems like container collapse, uneven heights, overlapping content, inconsistent alignment.

Example of CSS Clearfix

The following HTML code shows how clearfix can be used to prevent collapsing of containers.

Example

<!DOCTYPE html>
<html>

<head>
    <style>
        div {
            border: 3px solid;
            padding: 5px;
        }
        
        img {
            float: right;
            width: 150px;
        }
        
        .clearfix::after {
            content: "";
            clear: both;
            display: table;
        }
    </style>
</head>

<body>
    <h2>Without Clearfix</h2>
    <div>
        <img src="/css/images/css.png">
        This image is floated to the right. As the image is 
        taller than the container, it overflows to outside.
    </div>

    <h2 style="clear:right">With Clearfix</h2>
    <div class="clearfix">
        <img src="/css/images/css.png" >
        Here we added clearfix class to the containing element, 
        to fix this problem.
    </div>

</body>
</html>

CSS Clearfix With Overflow Property

We can also achieve similar functionality as clearfix, using overflow property in CSS. The overflow: auto; will make container stretch to fit all the inner elements.

This method is not recommended to use. The overflow:auto clearfix works well as long as you are able to keep control of your margins and padding (else you might see scrollbars).

Example

<!DOCTYPE html>
<html>

<head>
    <style>
        div {
            border: 3px solid;
            padding: 5px;
        }
        
        img {
            float: right;
            width: 150px;
            border: 1px solid;
        }
        
        .clearfix {
            overflow: auto;
        }
    </style>
</head>

<body>
    <h2>Without Clearfix</h2>
    <div>
        <img src="/css/images/css.png">
        This image is floated to the right. As the image is 
        taller than the container, it overflows to outside.
    </div>

    <h2 style="clear:right">With Clearfix</h2>
    <div class="clearfix">
        <img src="/css/images/css.png" >
        Here we added clearfix class to the containing element, 
        to fix this problem.
    </div>
</body>

</html>

Print Page