您的位置：首页 > CSS, Tips > 清除浮动新说

清除浮动新说

糖伴西红柿 发表于 24. Dec, 2009, 分类: CSS, Tips , 25 条评论 »
标签： &

起源：

.clearfix:after {
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}
.clearfix { display: inline-table; }
/* Hides from IE-mac \*/
* html .clearfix { height: 1%; }
.clearfix { display: block; }
/* End hide from IE-mac */

说明：

由于此方法针对的浏览器或成为历史（尤其是Mac下的IE5 ），或正在靠近
标准的路上，这个方法就不再那么与时俱进了。

抛掉对 IE/Mac 的支持之后，新的清除浮动方法：

/* new clearfix */
.clearfix:after {
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}
* html .clearfix             { zoom: 1; } /* IE6 */
*:first-child+html .clearfix { zoom: 1; } /* IE7 */

说明：

IE6 和 IE7 都不支持 :after 这个伪类，因此需要后面两条来触发IE6/7的haslayout，以清除浮动。幸运的是IE8支持 :after 伪类。因此只需要针对IE6/7的hack了。

糖伴西红柿说：
Jeff Starr 在这里针对IE6/7用了两条语句来触发haslayout。我在想作者为什么不直接用 * 来直接对 IE6/7 同时应用 zoom:1 或者直接就写成：

.clearfix:after {
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}
.clearfix{*zoom:1;}

以我目前的浅薄认知来讲，以上写法应该也可以直接达到同样效果。关于这个地方，在文章的评论里也有些讨论，我希望再听听大家的高见。

我平时都是用 overflow:hidden 来清除浮动的，因为够简单粗暴。但是 overflow 有时候也不太适用：

父级元素使用 overflow:hidden 时，如果其子元素定位到部分或全部在父元素之外，父元素就会对超出其外的子元素部分进行裁剪。

对 css3 来说，也会 overflow:hidden 也会对一些属性产生影响。
例如 box-shadow, 当父元素使用 overflow:hidden 属性时，box-shadow 会被裁剪。

其他可能被影响的元素如 text-shadow 和 transform。可以参考 Andy Ford 的 demo

对于那些不愿意再给标签添加额外的 clearfix 类来清除浮动的人来说，直接将需要清除浮动的元素添加进清除浮动代码块这个组也是一个办法。

.group:after,
#content:after,
#sidebar:after,
#some .other .thing:after
{
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
zoom:1;
}

这种情况下，html 和 css 文件就像一个跷跷板的两头。html 代码倒是整洁了，css 代码却出现了一定的繁冗。而且一旦专题页面过长，或者在项目中使用，用这个清除组的方式反而会不胜其扰。

归结下来，还是得看个人、项目的权衡选择.虽然我一直用简单粗暴的overflow:hidden，但是现在更倾向于使用 clearfix，感觉这种一体化的东西更靠谱，能避免偶尔对 zoom 的遗忘。

成熟的东西稳定性好，但是会比较复杂、厚重;简单的灵活性好，但是过于零散、随意，没有组织性，还没那么稳定.权衡决定到底要使用那种方法，有时候反而比问题本身还让人头疼.

我个人的想法是没有好与坏的区别，只有合适不合适的区别。但是我们一直都受困于所受的教育，什么问题都有标准答案，非对即错，非好即坏。经常可见对一些工具的讨论，都是奔着争出个谁好谁坏而去的，例如 jQuery mootools YUI.相比起到底是好谁坏，我们还是最好赶紧转变思想，摒弃”一刀切”的思想吧。

最后，关于为什么要采用一下这种复杂方式来针对IE6/7，而不采用其他稍微简洁的方式，还希望大家给我指点下迷津。

* html .clearfix             { zoom: 1; } /* IE6 */
*:first-child+html .clearfix { zoom: 1; } /* IE7 */

Reference:

VN:F [1.8.4_1055]
Rating: 7.4/10 (11 votes cast)
清除浮动新说7.41011
作者: 糖伴西红柿
用macbook的非果粉，喜欢精致的东西，喜欢听 Linkinpark Coldplay follow me on twitter: @gaowhen

您或许也会喜欢：

如果你喜欢本文，欢迎 订阅本站 以获得本站最新内容。

25 个评论

  • 北北 发表于Dec 24, 2009 at 14:30

    确实复杂~。。。。

    Reply
  • fish 发表于Dec 24, 2009 at 14:46

    似乎我还一直在用
    .clear{
    clear:both
    }

    Reply
  • LAdd 发表于Dec 24, 2009 at 15:40

    这样做存在一个问题。不知道是不是我忽略了什么。

    用了clearfix后， 在Dreamweaver CS3的设计视图里依然存在未清除的错位效果。但是预览以后个浏览器显示正常。

    所以我在用clearfix的同时后面都要跟一个然后提交的时候再把它删掉. 很麻烦, 求解惑…

    Reply
    • 咕噜咕噜 发表于Dec 25, 2009 at 01:15

      Dreamweaver所遵从的并不是w3c的标准，效果图可以无视。
      如果看效果图还在Dreamweaver里看到话，那离真正的标准是越来越远了……

      Reply
    • riant 发表于Dec 25, 2009 at 20:26

      从记事本编辑器过渡到DreamWeaver的，呵，从来无视DW的视图模式。因为他从来没有把我的代码正确预览出来过。

      Reply
  • hcys 发表于Dec 24, 2009 at 17:03

    我一直使用的清除浮动的方法是：在父元素中添加hidden:overflow;zoom:1;这个代码！
    不知道好不好，还希望各位指点迷津！

    Reply
  • 乱78招 发表于Dec 24, 2009 at 20:39

    yui一直是这样做的样

    xxx:afert{}
    xxx{zoom:1}

    Reply
  • chesanqi 发表于Dec 24, 2009 at 23:38

    应该是这样吧？需要触发haslayout的是.clearfix而不是.clearfix:after。。
    .clearfix:after {
    visibility: hidden;
    display: block;
    font-size: 0;
    content: ” “;
    clear: both;
    height: 0;
    }
    *.clearfix { zoom: 1; } /* IE6/7 */
    把zoon:1写到.clearfix:after 里是无效的。

    至于大师那复杂写法，同样也不明白。

    Reply
  • 新说？ 发表于Dec 25, 2009 at 12:21

    新说？哪里新？

    Reply
  • frank 发表于Dec 25, 2009 at 16:48

    用下面这个，而不用.clearfix{*zoom:1;} ，我想他是想使用可以通过W3C的HACK吧，虽然ZOOM是通不过的
    * html .clearfix { zoom: 1; } /* IE6 */
    *:first-child+html .clearfix { zoom: 1; } /* IE7 */

    Reply
    • riant 发表于Dec 25, 2009 at 20:27

      恩，我也有这个想法，只是，确实，zoom 是通不过的，那这样忙活还不是一样白搭？

      Reply
    • riant 发表于Dec 25, 2009 at 20:29

      或者，也许只是高手的习惯使然，也有可能是无意为之，呵，却叫我们在这里绞尽脑汁哩。

      我个人比较偏向糖伴西红柿那个写法。

      Reply
  • chisdy 发表于Dec 27, 2009 at 14:20

    我目前还是用overflow:hidden;zoom:1这个方式，也遇到过上面的问题，特别是有设置定位的时候。

    Reply
  • Rosetta 发表于Dec 30, 2009 at 10:54

    IE6/7下以haslayout清除浮動會吃掉浮动元素的margin-bottom, 所以clearfix依然有其局限.

    Reply
  • 奔波儿灞 发表于Dec 30, 2009 at 16:01

    ie7是支持:after伪类的啊=_=
    其实:after里只需要以下三行代码即可：

    display: block;
    content:”";/*这条是关键，引号内全空，但仍然生效*/
    clear: both;

    Reply
  • heixio 发表于Jan 4, 2010 at 12:31

    #some .other .thing:after{

    }
    这个写法没用过，往指点之，谢也

    Reply
  • heixio 发表于Jan 4, 2010 at 14:26

    哦，other和thing是父子，刚开始不明白你写的意思，8好意思，呵呵

    Reply
  • 天涯 发表于Jan 9, 2010 at 00:44

    其实还有一个方法，那就是让父级也浮动 #parent { float:left;width:100%};这样可以达到清除浮动的效果，加width:100%，就可以必免下面的元素加清除浮动，不过这个方法就有它的局限性，那就是#parent 如果有padding-left或padding-right的时候，宽度会超出你要想的范围，不过你可以设width:99%啊，之类的，总之就是不让下面的元素浮上来就行。清除浮动的方法很多，还是看具体情况选择一个比较合适的方法吧。

    Reply
  • Zack 发表于Feb 8, 2010 at 19:21

    这个网站是否和「前端观察」有联系？它转载了该文章，却未署名。

    http://www.collinswang.cn/?p=205&language=zh

    Reply

发表评论