在布局页面的时候,使用浮动布局是司空见惯的事情,但是在清除浮动(float)方面,也确实比较纠结,特别是在IE6、7下,问题多多,bug爬来爬去,很恶心。我们来看看清除浮动的几种方式:
第一种:普通方式。这种方式是比较多人会想得到
[javascript]
.clear-float{
clear:left;
font-size:0; /*非常有必要声明这个,否则IE6下容易恶心*/
height:0;
margin:0;
padding:0;
}
[/javascript]
第二种:口碑的实践方式。在开发使用中,没发现啥问题,但是有点臃肿。
[javascript]
.yk-fix-float:after{
content:".";
display:block;
height:0;
clear:both;
visibility:hidden;
}
.yk-fix-float{
zoom:1;
}
[/javascript]
第三种:简洁型。经过测试,将第二种的简单化,在IE6、7、8,FF,Safari,Chrome,Opera下都能正常清除浮动。《测试页面》
[javascript]
.clear-float{
zoom:1;
}
.clear-float:after{
clear:both;
content:"";
display:block;
}
[/javascript]
方式林林总总,有待大家共同总结。
参考文章:《All About Floats》,《How To Clear Floats Without Structural Markup》
第三种方式会有bug的:http://oldsha.com/2009/12/175/
另外还有几种方式,常见的是加overflow:hidden;zoom:1;
或者直接加个float:left;
另外还有一个情况我遇到过,就是
.yk-fix-float:after{
content:”.”;
display:block;
height:0;
clear:both;
visibility:hidden;
}
要再加上个font-size:0才行,否则在firefox下也有bug(很难碰到,可遇不可求)。
确实,div嵌套之前没测试到。thx @番茄
有点意思。
不错啊呵。
愚人节快乐,呵呵!
第一种是什么思路啊?你是说加一个标签吧?只加clear:both就好了~
另外楼上的,overflow:hidden了就不需要zoom:1了~
呵不错。
第一种只用clear:both在IE6下会莫名的出现一个高度,需要设置height和font-size来取消这个空白高度
@Zhou Qi
对于ie6应该是要加zoom:1的,我记得是这样
是不是因为div里有了空格~如果是这样,我觉得下面的更加合适:
.clear{
clear:both;
font-size:0;
line-height:0;
}
不过既然要用来清浮动就不应该有空格。
挺有意思的。
呵有意思。
呵不错啊。
不错有意思。
呵有意思。
不错有意思。
愚人节快乐,呵呵!
呵不错。
第一种是什么思路啊?你是说加一个标签吧?只加clear:both就好了~
另外楼上的,overflow:hidden了就不需要zoom:1了~
Many times I’ve read you and thought that I agree to many of your views and ways.