标签：
1、常用方法——overflow
给浮动元素的容器添加overflow:hidden;或overflow:auto;可以清除浮动，另外在 IE6 中还需要触发 hasLayout ，例如为父元素设置容器宽高或设置 zoom:1。
不过不能和position配合使用，因为超出的尺寸的会被隐藏。
overflow：auto会在内部宽度超过父元素时出现滚动条。
在添加overflow属性后，浮动元素又回到了容器层，把容器高度撑起，达到了清理浮动的效果。
2、终极方法——伪元素
如果遇到水平排列列表需要按情况显示二级子菜单的情况，使用overflow就会影响耳机子菜单了。
这时候就要在需要清除浮动的元素上设置伪元素：after，：before
<ul class="menu">
<li><a href="#">首页</a></li>
<li><a href="#">课程大厅</a>
<ul>
<li><a href="#">JavaScript</a></li>
<li><a href="#">jQuery</a></li>
</ul>
</li>
<li><a href="#">学习中心</a>
<ul>
<li><a href="#">视频学习</a></li>
<li><a href="#">案例学习</a></li>
<li><a href="#">交流平台</a></li>
</ul>
</li>
<li><a href="#">经典案例</a></li>
<li><a href="#">关于我们</a></li>
</ul>
<style>
.menu:before,.menu:after{/*清除浮动终极办法*/
content: ‘‘;
display: table;/*display的值也可以是block*/
}
.menu:after{
clear: both;
}
</style>
3、可用但不推荐方法——浮动元素父容器也添加浮动属性
<ul class="menu">
<li><a href="#">首页</a></li>
<li><a href="#">课程大厅</a>
<ul>
<li><a href="#">JavaScript</a></li>
<li><a href="#">jQuery</a></li>
</ul>
</li>
<li><a href="#">学习中心</a>
<ul>
<li><a href="#">视频学习</a></li>
<li><a href="#">案例学习</a></li>
<li><a href="#">交流平台</a></li>
</ul>
</li>
<li><a href="#">经典案例</a></li>
<li><a href="#">关于我们</a></li>
</ul>
<style>
.menu{
width: 960px;margin: 60px auto;
border: 1px solid #222;
background-color: #111;
background-image: linear-gradient(#444,#111);
border-radius:6px ;
box-shadow: 0 1px 1px #777;
float:left;/*浮动元素的容器也添加浮动属性*/
}
}
</style>
3.1、可用但不推荐方法——固定父元素高度属性height
原理：父级div手动定义height，就解决了父级div无法自动获取到高度的问题。
只适合高度固定的布局，要给出精确的高度，如果高度和父级div不一样时，会产生问题 。
3.2、可用但不推荐方法——结尾处加空div且设置clear:both
原理：添加一个空div，利用css提高的clear:both清除浮动，让父级div能自动获取到高度
不容易出现怪问题，但会出现很多空格，以前常用的解决方法。
<style type="text/css">
.div1{background:#000080;border:1px solid red}
.left{float:left;width:20%;height:200px;background:#DDD}
.right{float:right;width:30%;height:80px;background:#DDD}
.clearfloat{clear:both}
</style>
<div class="div1">
<div class="left">Left</div>
<div class="right">Right</div>
<div class="clearfloat"></div> /*处理方法*/
</div>
3.3、可用但不推荐方法——结尾加<br/>
<style type="text/css">
.div1{background:#000080;border:1px solid red;margin-bottom:10px;zoom:1}
.left{float:left;width:20%;height:200px;background:#DDD}
.right{float:right;width:30%;height:80px;background:#DDD}
.clearfloat{clear:both}
</style>
<div class="div1">
<div class="left">Left</div>
<div class="right">Right</div>
<br class="clearfloat" /> /*处理方法*/
</div>
标签：
原文地址：http://www.cnblogs.com/mmlvj/p/4648050.html
