clearfix css hack
The clearfix hack, or “easy-clearing” hack, is a useful method of clearing float(left, right) effort. The clearfix hack works great, but the browsers that it targets are either obsolete or well on their way. Specifically, Internet Explorer 5 for Mac is now history, so there is no reason to bother with it when using the clearfix method of clearing floats.
When the container not wrapping floated divs within it.clearfix hack (which includes the guillotine bug for IE etc). It fixes the problem.
Definition and Usage
This code define in css
/* new clearfix */ .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 */
Tips and Notes
Add class in html code
Class=”clearfix”
I happens most often (or is most noticeable) when you’ve got a design that wants to go flush to the bottom of the browser. However, for some damn reason, it just won’t go flush — it is that pesky five or so pixels that just won’t budge. Playing with the padding and margins don’t help — what could it be? Check the containing element and see if you’ve applied the clearfix css hack to it … because if you did, our money is that is your problem.
There are many variations of clearfix floating around the web.The clearfix method applies clearing rules to standards-compliant browsers using the :after pseudo-class. For IE6 and IE7, This clearfix method triggers has Layout with some proprietary CSS. Thus Clearfix method effectively clears floats in all currently used browsers without using any hacks.
Support browser
| IE | Firefox | Safari | Chrome | Opera | iPhone | Android |
| 6.0+ | 3.5+ | 3.0+ | 3.0+ | 10.5+ | 1.0+ | 2.0+ |
Many of blokes want to talk about dismissing older browsers but in the real world IE6 is still a major demographic. I know we all would like to see IE go away but face it, its just not going to happen.