HTML中清除浮动的几种方法

清除float的常见几种方式：

清除浮动方法（1）在浮动元素后面使用一个空的自身清除浮动的元素。

例如

<div style="clear:both;"></div>

实例：清除容器中子元素的浮动，让父元素塌陷的高度恢复。

    <div class="content">
        <div class="div1 son"></div>
        <div class="div2 son"></div>
    </div> 
    <div class="div-test"></div> 

CSS代码：

     .content{
         width:100px;
        border:1px dotted red;
     }
     .div-test{
         width:100px;
         height:100px;
         border:1px dotted black;
     }
     .son{
         margin:5px;
         width:40px;
         height:40px;
         background:blue;
         float:left;
     }

在类为son的div左浮动的情况下，容器div高度塌陷。

在浮动元素后面使用一个空的自身清除浮动的元素。

    <div class="content">
        <div class="div1 son"></div>
        <div class="div2 son"></div>
        <!--清除浮动样式-->
        <div style="clear:both;"></div>
    </div> 
    <div class="div-test"></div> 

清除浮动样式后的效果：

清除浮动后的效果

清除浮动方法（2）给浮动元素的容器添加overflow:hidden;的属性和赋值。

在示例中需要给类为content的div元素添加overflow:hidden;其中设置zoom:1;为兼容IE6/7，触发hasLayout属性。

     .content{
        width:100px;
        border:1px dotted red;
        /*增加清除浮动的代码*/
        overflow:hidden;
        zoom:1;
     }
     .div-test{
         width:100px;
         height:100px;
         border:1px dotted black;
     }
     .son{
         margin:5px;
         width:40px;
         height:40px;
         background:blue;
         float:left;
     }

清除浮动方法（3）通过CSS3的：after伪元素。

通过：after伪元素设置样式来实现浮动清除，是时下最为流行的清除浮动方式。它实现的原理与方法（1）一样，效果也可以一样。但是借助:after微元素设置样式，不需要在HTML代码上额外增加元素。

CSS代码：

     .content{
         width:100px;
        border:1px dotted red;
     }
     .div-test{
         width:100px;
         height:100px;
         border:1px dotted black;
     }
     .son{
         margin:5px;
         width:40px;
         height:40px;
         background:blue;
         float:left;
     }
/*此处设置清除浮动代码*/
     .content:after{
         content:".";
         display:block;
         height:0;
         visibility:hidden;
         clear:both;
     }
     .content{zoom:1;}

这里设置zoom:1;同样是为兼容IE6/7，触发hasLayout属性。

清除浮动方法（4）设置容器元素高度height，只适合高度固定的布局。

清除浮动方法（5）容器元素也设置浮动。不推荐，会产生新的浮动问题。