css技巧：清除浮动

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>