清除浮动（闭合浮动元素）方法总结

#outer { 
    display:inline-block; 
} 
/* Holly Hack Begine \*/ 
* html #outer { 
    height:1%; 
} 
#outer { 
    display:block; 
} 
/* End Hack */  

    P.S. 如果你不考虑 IE6/Mac用户的话你只需要写* html #outer {height:1%;}即可。
另外，似乎在Internet Explorer 7中不高display:inline-block也不好使。因此要使用最完整的Hack招数。

    3）浮动外部元素，float-in-float

    这种方法很简单，就是把“#outer”元素也进行浮动（向左或者向右）。

    但是这种方法带来的别外一个问题就是和“#outer”相邻的下一个元素会受到“#outer”的影响位置会产生变化，所以使用这种方法一定要小心。有选择把页面中的所有元素都浮动起来，最后使用一个适当的有意义的元素（比如页脚）进行清理浮动，这有助于减少不必要的标记，但是过多的浮动会增加布局的难度。

    4）设置overflow为hidden或者auto

    把“#outer”的属性overflow值设置为hidden或者auto同样可以清理浮动

    这种方法不需要添加额外的标记。但是使用overflow的时候一定要小心，因为它会浏览器的表现。另外，在Internet Explorer 6中单纯地设置overflow为hidden或者auto并不能有效清除浮动（闭合浮动元素），还要指定“#outer”的一个维度，即要么给它指定一个宽度，要么指定一个高度：
#outer {
    overflow:auto;
    width:100%;
}

    注意：如果你要在IE5/Mac上使用这种方法清除浮动（闭合浮动元素）的话，你就必须设定overflow的属性为值为hidden。

    比较与选择

    四种方法中使用哪种最好呢？首先，不推荐使用after伪类，对比其它三种方法，holly招数有点太烦琐，不好掌握，我上面讲到的holly招数中并不仅仅是IE/Win上有问题，当出现:hover时还会有其它问题，所以我们又加上了inline-block等属性，也就是说这种方法存在更多的不确定性。推荐对代码有“洁癖”并且技术较高的人使用。

    那么其它三种方法其实都可以考虑。不过使用overflow的时候，可能会对页面表现带来影响，而且这种影响是不确定的，你最好是能在多个浏览器上测试你的页面；

    而对于使用额外标签清除浮动（闭合浮动元素），是W3C推荐的做法。至于使用<br />元素还是空<div></div>可以根据自己的喜好来选（当然你也可以使用其它块级元素）。不过要注意的是，<br />本身是有表现的，它会多出一个换行出来，所以要设定它的heigh为0，以隐藏它的表现。所以大多数情况下使用空<div>比较合适。

    float-in-float，也是一个很好的选择，把你要进行清理浮动的元素外层再加上一层<div>并设置属性fload:left即可，不过要注意相邻元素的变化。

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