When and How to use a Clearfix – CSS Tutorial

A CSS clearfix is used to fix issues related to floating child elements within a parent element. Without a clearfix your child elements wont behave as you expect them too. When a HTML element is floated it can appear to sit outside its parent element and that means it wont adjust the parents height accordingly.

It is important to remember that a clearfix is a type of hack used to fix problems associated with floating child elements within a parent element. Float was intended to be used; as an example – to position elements like images within a page. When you float an image left or right the text will wrap around it.

The practice of floating element for the purposes of layout was abused and thus this relic of the past remains for now.

What Happens when you Don’t use a Clearfix

While I could try and explain this in various ways, I think some visual examples will go a lot further in helping non developers understand the reasoning behind a clearfix and to do that I shall call upon my illustrious drawing skills with paint.

Lets assume you have a div with a class container. Inside this div you have two more divs with the classes content and sidebar respectively and you want to float them so your content is on the left and your sidebar on the right.

Without a clearfix the following would happen.

Figure I

content and sidebar without a clearfix

Notice how the two floated Divs (elements) are outside the parent container and are only influenced by the padding at the top. In this case there is 20px of padding on all sides of the parent container. So both the content and sidebar will be pushed down by 10px. However we also wanted 10px of clearance on the left, right and bottom but since floated elements get pushed outside the parent container this is not happening.

On a real websites the results are a whacky looking website.

Figure II

content and sidebar without a clearfix on a website

What your seeing here is the same as figure I on my blog. The brown colored background is coming from the optin form right at the bottom. Without a clearfix it fills the space that should be occupied by the parent container which houses both the sidebar and content. The white space you see at the top is the padding.

What Happens when you Include a Clearfix

When you include a clearfix the issues presented in figures I & II will be rectified. Here is the same illustration shown in figure I with a clearfix.

Figure III

content and sidebar with a clearfix

As you can see the parent container now wraps around the two child elements ( content and sidebar) and this gives us the desired behavior that we would expect. This would also fix the issue seen in figure II as the footer and optin form would sit below the container. You will also notice the padding ( seen in purple) also behaves as we would expect.

What does a Clearfix Look Like?

The following snippet of code is a typical clearfix used on most sites.

.clearfix:after {
    clear: both;
    content: ".";
    display: block;
    height: 0;
    line-height: 0;
    visibility: hidden;
}

Note that the content is not empty and includes a dot. This is because older browsers don’t support empty content, so including a dot provides support for them too.

How to use a Clearfix?

When applying classes to your HTML elements you should be mindful of which elements require a clearfix. Any HTML element will have floated child elements will require a clearfix. You can do this by adding the class clearfix to your existing classes ( assuming you have access to editing those classes).

<div class="container clearfix">
    <div class="content">other content stuff...</div>
    <div class="sidebar">Sidebar stuff...</div>
</div>

HTML classes can accept more than one class by separating them with a space. That means the container will accept CSS rules from both .container and .clearfix.

Meet the Author

Matthew Horne

Matthew Horne is web developer who specializes in optimized development. He also builds custom solutions instead of reverting to plugins. Matthew Has a strong understanding of PHP, JavaScript, jQuery.

4 comments… add one
  • satish Sep 5, 2014, 10:38 am

    Really, You use Very easy and simple method for explain about clearfix…! Thanks!!

  • pier Oct 30, 2014, 4:57 am

    excellent yet simple to understand explanation, The graphics really helped. TACKLE MORE TOPICS… e,g responsive design, grids, etc thanks!

  • alex Nov 1, 2014, 3:02 pm

    This is what I’m looking for, very easy to understand and to implement.

    Thanks a lot Mathhew =)

  • kenmcfadden Nov 18, 2014, 1:57 pm

    Finally something that makes a little sense. Thanks.

Leave a Comment