Clearing Floats without Display property
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 b开发者_开发知识库oundaries of the parent container I can't use the new school method. In this scenario, is there a better method than clear:both?
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.
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.
精彩评论