西红柿爱番茄

Feed Rss

清浮动的种种方式

03.30.2010, CSS, by .

在布局页面的时候,使用浮动布局是司空见惯的事情,但是在清除浮动(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

清浮动的种种方式 有 20 条回应

  1. 第三种方式会有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(很难碰到,可遇不可求)。

  2. 2010-03-30 在 21:40 Supersha

    确实,div嵌套之前没测试到。thx @番茄

  3. 有点意思。

  4. 不错啊呵。

  5. 愚人节快乐,呵呵!

  6. 第一种是什么思路啊?你是说加一个标签吧?只加clear:both就好了~

    另外楼上的,overflow:hidden了就不需要zoom:1了~

  7. 2010-04-03 在 16:20 Supersha

    第一种只用clear:both在IE6下会莫名的出现一个高度,需要设置height和font-size来取消这个空白高度

  8. @Zhou Qi

    对于ie6应该是要加zoom:1的,我记得是这样

  9. 是不是因为div里有了空格~如果是这样,我觉得下面的更加合适:
    .clear{
    clear:both;
    font-size:0;
    line-height:0;
    }
    不过既然要用来清浮动就不应该有空格。

  10. 挺有意思的。

  11. 呵有意思。

  12. 呵不错啊。

  13. 不错有意思。

  14. 呵有意思。

  15. 不错有意思。

  16. 愚人节快乐,呵呵!

  17. 呵不错。

  18. 第一种是什么思路啊?你是说加一个标签吧?只加clear:both就好了~

    另外楼上的,overflow:hidden了就不需要zoom:1了~

  19. Many times I’ve read you and thought that I agree to many of your views and ways.

发表评论

电子邮件地址不会被公开。 必填项已用 * 标注

*

您可以使用这些 HTML 标签和属性: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>