css浮动产生和清除浮动的几种方式

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

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

浮动产生负作用：

　　　　1、背景不能显示

　　　　2、边框不能撑开父元素

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

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

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

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

演示:

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>浮动副作用</title>

     <style>

         .container{

             margin:40px auto;

             width:400px;

             border:5px solid grey;

             background: yellow;　　　　/*背景不能显示*/

         }

         .left{float:left;width:200px;height:100px;border: 1px solid red;}

         .right{float:right;width:196px;height:100px;border: 1px solid red;background: blue;}  /*边框不能撑开父级元素*/

     </style>

 </head>

 <body>

     <div class="container">

         <div class="left">left浮动</div>

         <div class="right">right浮动</div>

     </div>

 </body>

 </html>

结果显示：

本来俩个红色对象是在父级元素灰色盒子内的，但是因为对俩个红色盒子使用了float浮动，所以俩个盒子产生了浮动导致灰色盒子不能撑开，这样浮动就产生了。

为了解决上面的浮动产生的副作用，本人总结了以下几个清除浮动的方式：

1.clear:both清除浮动

HTML代码：

     <div class="container">

         <div class="left">left浮动</div>

         <div class="right">right浮动</div>

         <div class="clear"></div>

     </div>

具体CSS代码：

     <style>

         .container{

             margin:40px auto;

             width:400px;

             border:5px solid grey;

             background: yellow;/*背景正常显示*/

         }

         .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;}

     </style>

结果显示：

父级背景以及边框也能正常显示和撑开了，优点方便使用，缺点是会多加HTML空标签

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

优点：无需额外的标签，浏览器兼容性好，是目前用的最多的一种清除浮动的方法之一，企业都在用；

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

HTML代码：

     <div class="container">

         <div class="left">left浮动</div>

         <div class="right">right浮动</div>

     </div>

CSS代码：

     <style>

         .container{

             width:400px;

             border:5px solid grey;

             background: yellow;

         }

         .left{float:left;width:200px;height:100px;border: 1px solid red;}

         .right{float:right;width:196px;height:100px;border: 1px solid red;background: blue;}

         .container:after{

             content:"";

             display: block;

             clear:both;

         }

         .container{    *zoom:;    /*ie6清除浮动的方式 *号只有IE6-IE7执行，其他浏览器不执行*/ }

     </style>

结果显示：

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

一般设置高度需要能确定内容高度才能设置。这里我们知道内容高度是100PX+上下边框为2px，这样具体父级高度为102px，

只需在上面的浮动缺点副作用代码中的设置类样式.container加上父级高度即可，这里我就不做过多演示了。缺点也非常明显，本人不建议这样清除浮动。

4.对父级设置overflow:hidden

原理：父元素定义overflow:hidden，此时，浏览器会自动检查浮动区域的高度；

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

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

代码也是在副作用基础上container中添加上overflow:hidden或者auto即可实现清除浮动效果

结果显示：

优缺点：很完美，但是属性太多；不好分别。