借口碑网首页改版之际，抽离一些自认为这次在首页前端开发中一些有用的东西拿出来和大家探讨一下。口碑网发展比较快，也不知道这版首页会持续多久，啥时候改版的话，本系列文章自动终止。

今天说说清除浮动，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 {*display: inline-block;}

第一种情况的示例看下图：

第二种情况的示例看下图：

你可以访问口碑网首页使用firebug展开dom节点找到相应的位置看。

由于firefox3对inline-block提供支持了，所以那行对IE进行控制的代码我给加上了*，让fx3忽视它。这里应该有更好的处理方式，如果你知道希望回帖告诉我。

另外最近不小心看到网上一个新方法，这样子也行…

.clearfix {
overflow:auto;
zoom:1;
}

来自：口碑网首页前端技术分享系列之一，清除浮动