清除浮动的五种方法

前提：一个父元素div_p，里面包含两个子元素div_01,div_02;外面还有一个div_add;

<div class="class_p">
        　　<div class="class_01"></div>
       　　 <div class="class_02"></div>
    </div>
    <div class="add"></div>

如果不设置div_p的高度，下面的div add会浮上去，如何解决？

1,给父元素定高：

.class_p{

　　height:300px;

}

2，增加额外的标签：给div_p里面再增加一个子元素（div标签）class_03设置属性

.class_03 {

　　clear:both;

}

即可清除浮动

3，使用  ：after伪元素 ：给div_p增加一个class—clearFloat，设置它的伪类 

.clearFloat:after{

　　content:'';

　　 display:block;

　　clear:both;

}

//兼容IE：
.clearFloat{zoom:1;}

4,利用overflow属性：设置父元素的overflow属性

.class_p{

　　overflow:hidden;

　　zoom:1  //设置zoom是为了兼容IE

}

5，父元素浮动：并且需要在外面再加一个div（clearFloat），

<div class="class_p">
        <div class="class_01"></div>
        <div class="class_02"></div>

</div>

<div class="clearFloat"></div>   //额外添加的div
<div class="add"></div>

.class_p{

　　float:left;

}

.clearFloat:after{

　　content:'';

　　display:block;

   　clear:both;

}

.clearFloat{

　　zoom:1;   //设置zoom是为了兼容IE

}

//感觉这样更麻烦了，但也是一种解决办法