CSS Clearfix Best Cross browser solution

Clearing the divs has always been a solution for web 2.0 sites but there are many ways to implement it. The reason of this post is not to go in the details but giving a simple cross-browser css solution. BTW I prefer this css solution rather than adding the ugly empty clear div all over your html and polluting the markup.

Bad Solution :

<div style="clear:both"></div>

Perfect Cross Browser Solution:

add the css below to your site wide CSS file. and then apply the class clearfix to any containers that need to be cleared, or the containers in which you are adding the clear-div. and yes remove the clear-div of-course.

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

.clearfix {
	display: inline-block;
}

html[xmlns] .clearfix {
	display: block;
}

* html .clearfix {
	height: 1%;
	overflow: visible;
}

Published by Umair Jabbar

Umair Jabbar is an enthusiast, a Software Engineer / Web Developer who wants web to be simpler for everyone.

Join the Conversation

18 Comments

  1. Pingback: designfloat.com
  2. Could you give some example? Because I tried it (first div floated left, second right) and the div with this two elements doesn’t extend. Did I missed something? Thanks.

    1. Hey buddy, when ur trying to float elements in your layout you need to clear+fix your parent element, in order to float your child elements from not breaking the layout. Try using the following example, it might solve all your cross browser issues:

      Style:

      /* @group clearfix */

      .clearfix:before, .clearfix:after { content: “020”; display: block; height: 0; overflow: hidden; }

      .clearfix:after { clear: both; }

      .clearfix { zoom: 1; }

      .clearfix {

      zoom: 1;

      }

      .clearfix:after {

      clear:both;

      content:’.’;

      display:block;

      visibility:hidden;

      height:0;

      font-size: 0;

      }

      .clearfix {

      display:block;

      }

      * html .clearfix {

      height:1%;

      }

      *+html .clearfix {

      }

      /* @end */

      HTML Markup:

      Floating Left Element
      Floating Right Element

      Hope you like my coding style.

      Cheers.

    1. which fixed height ? there is no need to fix a height for the container containing floating elements. I am glad this helped you.

  3. Hi I am soori,
    There is no need to write clearfix class , we can write css [display:table] it self to wraper or container

    1. Hi Soori, the css property you just mentioned has some cons associated with it, the major one being that this wont work in IE7 and earlier browsers. And this is a major point because we dont develop layouts for our browsers only :). You can google about this fact and other disadvantages of using display:table for making modern day layouts.

      I hope that has answered your query.

  4. I like how this doesn’t require you to create a new element to make it work cross browser (and I literally tested all of them). There is, however, a limitation.

    Suppose you have an unordered list and you float the list items. In order to fix the float problem, you’d apply clearfix to the ul. Now, you can no longer center the ul by applying margin: 0px auto;

    I think I’m going back to the WordPress solution with the

    1. hi @ce6a12cbc444182b7744113204085b37:disqus , thanks for liking the solution proposed here.
      For the centering of ul you need to have a width assigned

  5. Not working properly yet:

    Untitled

    .clearfix:after {
        content: “.”;
        display: block;
        clear: both;
        visibility: hidden;
        line-height: 0;
        height: 0;
    }
     
    .clearfix {
        display: inline-block;
    }
     
    html[xmlns] .clearfix {
        display: block;
    }
     
    * html .clearfix {
        height: 1%;
    }

    #dSide {
        width:200px;
        border:1px solid #ddd;
        height:100px;
        float:left;
    }
    #dMain{
        margin-left:210px;
        border:1px solid #ddd;
    }
    #head a{
        float:left;
        display:block;
        width:100px;
        height:30px;
        background-color:#ddd;
    }

    left side, float

       
            aaaa
            bbbb
            cccc
       
       
            content followed
       

  6. Setting the container’s display to “inline-block” breaks my layout. Now the container depends on its internal content to push out its width instead of acting like a block element. If the internal content is minimal then the container is too skinny.

    I added the line “width:inherit” to the .clearfix class, seems to have fixed my issues.

Leave a comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.