DZone Snippets is a public source code repository. Easily build up your personal collection of code snippets, categorize them with tags / keywords, and share them with the world

Snippets Manager

Snippets has posted 5883 posts at DZone. View Full User Profile

Clear Fix

03.22.2006

| 6619 views |

        // Clears floats that do not automatically force the container's bottom edge down as the float is made taller.

/* Hacks/Misc */
.cf:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }
* html .cf {height: 1%;}

Tags:

css
hacks

Comments

Snippets Manager replied on Sun, 2010/06/27 - 6:54am

The best way to use a clearfix can be found at best clearfix ever. It doesn't use class names to fix the problem but an automatic solution that should be applied to all block level elements except for the p and footer elements.

Snippets Manager replied on Thu, 2006/05/04 - 9:07pm

IE 7 fixes their height bug but doesn't add support for :after. Therefore, above needs to be tweaked.

.cf:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }
.cf { display:inline-block; } /*this trips hasLayout for ie7*/
.cf { display:block; } /*this returns it back to normal*/

be sure to feed .cf { display:inline-block; } to ie5 for the mac .cf { height:1% } for ie6 and below source: http://www.456bereastreet.com/archive/200603/new_clearing_method_needed_for_ie7/