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这个属性。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
ul{
list-style:none;
height:auto;
margin:0;
padding:0;
background-color:#436973;
}
li{
float:left;
width:80px;
height:80px;
background-color:#83B1DF;
}
.demo{
clear:both;
border:1px solid #FF00FF;
margin-bottom:5px;
}
.overflow{
overflow:auto;
zoom:1;
background-color:#43FF73;
}
ul{
list-style:none;
height:auto;
margin:0;
padding:0;
background-color:#436973;
}
li{
float:left;
width:80px;
height:80px;
background-color:#83B1DF;
}
.demo{
clear:both;
border:1px solid #FF00FF;
margin-bottom:5px;
}
.overflow{
overflow:auto;
zoom:1;
background-color:#43FF73;
}
</style>
</head>
<body>
<div class="demo">
<ul class="overflow">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
</ul>
</div>
<div class="demo">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
</ul>
</div>
</body>
</html>
其中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;
}
![门户通专访月光博客：第一博客是如何打造成的[图]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)