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;
}
  • Sarfaraz A. Hanfi

    Good Excellent ! good start keep it up i know your are a good developer

  • Anonymous

    Thank you !

  • http://www.designfloat.com/story/590537/ designfloat.com

    Best Cross-browser CSS Clearfix solution | Kaizen…

    A simple cross-browser css solution. Works like a charm…

  • Mtrebizan

    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.

  • Anonymous

    Hi,

    check out this sample http://jsfiddle.net/W2ZMs/
    then remove the clearfix class on main container and try it again, you will see the container will not actually contain the elements then

  • Mtrebizan

    Yeah, it works, forgot the fixed “height” on outer element :) thanks and great work!

  • Anonymous

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

  • Sureshvallapu1982

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

  • Sureshvallpau1982

    exp:
    #wraper{
    width:980px;
    display:table;
    marging:0;
    padding:0;
    }

  • Anonymous

    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.

  • gavsiu

    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

  • http://umairj.com/ Umair Jabbar

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

  • Tonton

    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
       

  • Pierre Guthrie

    Just want some explanation on why is your code a best solution rather than ?

  • http://www.pjswesey.com P.J.

    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.

  • http://design2u.me/blog/370/css-%e8%a7%a3%e6%b1%ba-float-%e7%9a%84-bug-%ef%bc%9aclearboth Design2U » [CSS] 解決 Float 的 Bug :clear:both

    [...] 原文:http://umairj.com/68/css-clearfix-best-cross-browser-solution/ [...]

  • http://www.facebook.com/rohan.tapiyawala Rohan Tapiyawala

    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.

  • http://twitter.com/ph3nx ◅ Pascal G. ▻

    If you don’t need support for IE you can use this very simple clearfix solution:

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