Clearing Floats without Display property

Question

I know the old school method for clearing floats is a class for clear:both, and that it has generally been outmoded.

I know the new school method is width:100%; overflow:auto or hidden;

But when I've got contents that dynamically expand beyond the boundaries of the parent container I can't use the new school method. In this scenario, is there a better method than clear:both?

this thread should help: http://stackoverflow.com/questions/211383/which-method-of-clearfix-is-best — Gregg B, Nov 19 '10 at 19:04
@Grillz - that selected answer is outdated and very bad practice. — meder omuraliev, Nov 19 '10 at 21:13

meder omuraliev · Answer 1 · 2010-11-19T21:42:53.673

There are two "new school" methods. One is overflow and the other is clearfix.

new school #1:

#el { 
   overflow:hidden; 
   zoom:1;
}

A value of anything but visible to overflow creates a new block formatting context which causes floats to be automatically cleared.

new school #2:

#el:after { 
   content:"";
   clear:both;
   display:block;
}
#el { zoom:1; }

The clearfix basically generates an invisible whitespace "element" that is block-level and clears the area after the element. It's a CSS replacement for inserting a blank div that clears for you.

If you need an element that goes outside the boundaries, use #2. Otherwise, use #1. The zoom triggers hasLayout, and causes the el to contain floats in pre IE7. IE7+ understands the overflow:hidden.

EDIT: As Grillz pointed out, content: "\0020"; is actually the newest, newest property value for the clearfix if you go that route. There's a rendering bug which occurs in regards to whitespace which can be resolved by specifying that instead of a period, empty string, or one space string.

score 2 · Accepted Answer · answered Nov 19 '10 at 21:23

She's right, I posted an older thread in an effort to consolidate, but according to the html5 boilerplate this is the defacto clearfix now:

http://www.yuiblog.com/blog/2010/09/27/clearfix-reloaded-overflowhidden-demystified/

.clearfix:before, .clearfix:after {
  content: "\0020"; display: block; height: 0; visibility: hidden;  
} 

.clearfix:after { clear: both; }   
.clearfix { zoom: 1; }

We use <br> clears here so I'm not hip to the new school style. Sorry.

Clearing Floats without Display property

2 Answers2