位置：首页>> 网络编程>> 网页设计>> css清除浮动的方法总结与选择（3）

css清除浮动的方法总结与选择（3）

作者：dudo　来源：dudo blog　发布时间：2008-06-06 12:58:00　

标签：浮动,方法,css,设计,布局

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

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

例子

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

例四：float-in-float

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。

演示五：overflow-hidden.htm （3.24 KB）

比较与选择

四种方法中使用哪种最好呢？首先，不推荐使用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.positioniseverything.net/easyclearing.html
http://www.sitepoint.com/blogs/2005/02/26/simple-clearing-of-floats/
Book：CSS Master

第一页上一页 1 2

投稿

css清除浮动的方法总结与选择（3）

猜你喜欢