CSS网页制作:浮动清除的新方法

其他可能被影响的元素如 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:

• [1].Jeff Starr，The New Clearfix Method， December 6, 2009
• [2].Andy Ford, Saying Goodbye to the overflow: hidden Clearing Hack, December 10th, 2009

凌众科技专业提供服务器租用、服务器托管、企业邮局、虚拟主机等服务，公司网站：http://www.lingzhong.cn 为了给广大客户了解更多的技术信息，本技术文章收集来源于网络,凌众科技尊重文章作者的版权，如果有涉及你的版权有必要删除你的文章，请和我们联系。以上信息与文章正文是不可分割的一部分,如果您要转载本文章,请保留以上信息，谢谢!