清除浮动详解

浮动的语法：float:left/right;

浮动float的原本设计了作用初衷是为了实现文字环绕效果

浮动产生负作用：

1、背景不能显示

2、边框不能撑开父元素

3、margin padding设置值不能正确显示

浮动之后会使父元素内的子元素漂浮在父元素上方，造成父元素边框重叠。所以需要清除浮动来使子元素撑开父元素。

简单来说浮动是因为使用了float:left或float:right或两者都是会产生的浮动。

什么时候使用清除浮动呢？当父元素没有设置宽度或者高度的时，又需要子元素撑开父元素的时候使用清除浮动。

清除浮动的方式

1.clear:both清除浮动

优点方便使用，缺点是会多加HTML空标签

   <div class="container"> 
2         <div class="left">left浮动</div> 
3         <div class="right">right浮动</div>
4         <div class="clear"></div>
5     </div>

 .left{float:left;width:200px;height:100px;border: 1px solid red;}
 .right{float:right;width:196px;height:100px;border: 1px solid red;background: blue;}  /*边框能撑开*/     

 .clear{clear:both;}

2.使用after伪元素清除浮动（推荐使用）

是目前用的最多的一种清除浮动的方法之一

缺点：ie6-7不支持伪元素：after，使用zoom:1触发hasLayout.

  .container{
 3             width:400px;
 4             border:5px solid grey;
 5             background: yellow;
 6         }
 7         .left{float:left;width:200px;height:100px;border: 1px solid red;}
 8         .right{float:right;width:196px;height:100px;border: 1px solid red;background: blue;}  

 9         .container:after{
10             content:"";
11             display: block;
12             clear:both;
13         }
14         .container{    *zoom: 1;    /*ie6清除浮动的方式 *号只有IE6-IE7执行，其他浏览器不执行*/ }

3.对父级设置适合CSS高度

4.对父级设置overflow:hidden

优点：简单，无需增加新的标签；

缺点：不能和position配合使用，因为超出的尺寸的会被隐藏；