口碑网首页前端技术分享系列之一，清除浮动
Published by 大米
借口碑网首页改版之际，抽离一些自认为这次在首页前端开发中一些有用的东西拿出来和大家探讨一下。口碑网首页改版比较勤快，也不知道这版首页会持续多久，啥时候改版的话，本系列文章自动终止。
今天说说清除浮动，clear float。
常规清除浮动，只要在需要清除的那个元素加上clear:left、clear:right或者clear:both
但是有两个情况下，靠以上这种简单处理不行。
第一种情况，父元素有border或者background等视觉体现，而子元素都是float元素的时候，需要对子元素结束的时候对float做清理，否则视觉显示不出来。第二种情况，也是基于视觉的考虑，第一个元素的子元素做了一些浮动，紧接着的第二个元素有border要显示，但是如果直接在自己身上加clear，会导致第一个元素的padding-bottom后者本身的margin-top失灵，而因为要显示border，不好用padding-top来控制与第一个元素的间距。这些时候可以用这个经典的清除浮动class加在父元素上来清除自身的浮动：
.clearfix:after {
content: ".";
display: block;
height: 0;
font-size: 0;
clear: both;
visibility: hidden;
}
.clearfix {zoom:1;}
第一种情况的示例看下图：
第二种情况的示例看下图：
你可以访问口碑网首页使用firebug展开dom节点找到相应的位置看。
原版（网上搜索clearfix到处都是）对IE/MAC提供了支持，并且用height:1%对IE进行hack。我对那部分做了修改，用了zoom:1来取代。
另外最近不小心看到网上一个新方法，这样子也行…
.clearfix {
overflow:auto;
zoom:1;
}
6月 21st, 2008 at 11:39 上午
.clearfix {
overflow:auto;
zoom:1;
}
这样用的话会有一点副作用的。呵呵
6月 21st, 2008 at 11:05 下午
一贯的详细风格。。支持。呵
6月 21st, 2008 at 11:19 下午
可以到这里看看这篇文章http://www.positioniseverything.net/easyclearing.html
，挺详细的
6月 22nd, 2008 at 5:17 下午
个人还是习惯用第二种方式。
6月 23rd, 2008 at 2:19 下午
原来inline-block是针对IE/MAC的hack（现在用MAC的难道不是用safari的吗？这个hack存在的意义太渺小了..删之），height:1%才是对IE/WIN的hack，不过我发现用zoom:1对IE/WIN也有效，还是这样写漂亮些。
已对本文做了修改，同时也更新了口碑网线上的CSS。
6月 23rd, 2008 at 2:23 下午
哈哈 看到一瞬 啦
6月 24th, 2008 at 11:14 下午
zoom:1和height:1%都是激发IE的hasLayout模式
inline-block在IE下其实也不是inline-block,作用同上
6月 25th, 2008 at 12:39 下午
height:1%除了让元素有hasLayout外，有个副作用，这是一些文章中没有提到的。
就是当父元素设定了高度的时候，该block元素的高度会被指定为父元素高度的1%
8月 10th, 2008 at 5:45 下午
你用的是哪个编辑器！！很不错！！可否告知？
8月 13th, 2008 at 12:37 上午
文章里给出的是firebug的截图，不是编辑器。它是firefox的一个插件，可以展开DOM