三种css清除浮动的方法

1、利用clear:both来清除浮动，原理是在最后一个浮动元素的同级添加一个空便签，并添加clear:both，效果很不错，但增加了一个无语意标签。

2、利用:after伪类，最经典的就是clearfix了，屡试不爽。但除开li这样的列表浮动浮动时本身就有ul这样的父标签可用，这里需要给我们的浮动元素增加一个空的父容器，然后应用clearfix，这样让我们的页面内容的层次嵌套深了一层，如果滥用这样的浮动闭合，那么嵌套的层次自然越来越深。为了实现页面效果，我们大幅度地动了DOM的结构。我觉得这样深的结构对于搜索引擎来讲肯定是只有弊不会有利。搜索引擎本身对页面做清理的时候需要递归这么多层的嵌套，效率自然有消耗。对于页面重点的内容更应当避免过深的嵌套。（这是土豆首页的一块代码截图，虽然不是clearfix造成的，但我很不解为何要嵌套这么深，而且还是节目内容这么重要的元素。可以在baidu里搜索一下site:www.tudou.com，你会发现收录的基本都是土豆的用户主页，而不是视频。再对比一下其他几个视频站，你会发现区别的。）

3、利用overflow属性。给浮动元素的父级添加overflow，设置为visible之外的任何属性都行，但IE下需要触发layout。从结构上讲和clearfix带来的麻烦一样，滥用会造成页面内容的层次过深。

而且FF、OP、IE7都支持，从此可以告别那又长兼容性又差的FF清浮动的方法了。

方法真的很简单，只要为需要清浮动的标签加上overflow这个属性。

 

 

 

 

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9

 

其中zoom是为了IE6准备的。

完整的Demo

注：忘了一个很重要的内容，并不是所有的overflow属性都可起来一样的效果，比如visible属性就只能对IE起作用。例子可以看这里Demo2
这样的话就有一个问题啦，如果要有高度，而且内容超出高度的时候，定义auto或hidden都可能会有一些不想要的效果出现。这里提供一个解决方案：对于IE6及以下版本的IE，可以直接定义高度；对于IE7、FF、OP，可定义min-height。

 

overflow{
height:auto;
_height:200px;
min-height:200px;
verflow:auto;
zoom:1;
_overflow:visible;
}