Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 
  • what is clearfix?

    • 0
    • 1
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 545
    Comment on it

    Hello readers !

    Today We will discuss about clearfix

    If you have any floating div inside a container and want to clear the floats normally you may are using clear:both class because this is simplest and most common way to solve this. But it's a very old technique.

    But Instead of this smart coders now days use clearfix css technique. This allows you to contain floating div without extra structural markup. basically its works on pseudo-elements.

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

    But some older versions of IE do not support it. So you have to add some extra CSS for IE and other older browsers.

    .cf:before, .cf:after { content: ""; display: table; }
    .cf:after { clear: both; }
    .cf { zoom: 1; }
    

    Its called Micro Clearfix.

    An another example of clearfix class.

    .clearfix:after {
        visibility: hidden;
        display: block;
        font-size: 0;
        content: " ";
        clear: both;
        height: 0;
        }
    * html .clearfix             { zoom: 1; } /* IE6 */
    *:first-child+html .clearfix { zoom: 1; } /* IE7 */
    

 0 Comment(s)

Sign In
                           OR                           
                           OR                           
Register

Sign up using

                           OR                           
Forgot Password
Fill out the form below and instructions to reset your password will be emailed to you:
Reset Password
Fill out the form below and reset your password: