哪个clearfix方法？答案

【问题标题】：Which clearfix method?哪个clearfix方法？
【发布时间】：2010-07-12 09:02:36
【问题描述】：

/* 清除修复 */

.clearfix:after {content: ".";display:block;height:0;clear:both;visibility:hidden;}
* html .clearfix {height:1%;}

或

.clearfix:after {content: ".";display:block;height:0;clear:both;visibility:hidden;}
* html .clearfix, *:first-child+html .clearfix {zoom:1;}

哪个效果最好？我现在用了第一个，从来没有遇到过问题。。谢谢。

【问题讨论】：

我认为您在第二个上犯了一个错误> 根据我的经验，您必须将 IE6 和 IE7 hack 放在单独的行语句中，否则它将不起作用
有人可以确认一下吗？
当content:"" 创建元素而不创建可见字符和线条时，为什么要浪费属性隐藏您添加的点！？

标签： html css css-float

【解决方案1】：

最简洁的技术是为现代浏览器设置溢出：隐藏：

overflow:hidden;
zoom:1;

如果一个元素需要超出尺寸（负边距或定位），那么 clearfix:

#el:after { content:""; clear:both; display:block; visibility:hidden; }

对于 IE6 及以下，您需要触发 hasLayout（通过宽度、缩放：1、高度和其他属性/值组合）。从 IE7 开始，overflow 会清除浮动。

【讨论】：

【解决方案2】：

后者似乎没问题，因为它还考虑了 IE6 (zoom:1;)。

【讨论】：

这两个帐户中的任何一个都适用于 IE6。后者更灵活。

【解决方案3】：

这一直对我有用。和你的很像

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

【讨论】：

inline-block 和 block 以及 height:1% 是多余的。 content:"" 已经足够好了。