css清除浮动

源码：

<div id="div1">
    <div class="left">left</div>
    <div class="right">right</div>
</div>
<div id="div2">
    div2
</div>

1.使用. clearfix----推荐使用

----给父类添加class=“ clearfix ”

.clearfix:before,.clearfix:after{display:table;content:"";}
.clearfix:after{clear:both;}
.clearfix{*zoom:1}//兼容IE6

2.父级div定义伪类： after和zoom

#div1 : after { display :  block ;; clear :  both ;  content :  " " ;

             visibility: hidden; height: 0;

}

#div1{zoom:1}//兼容IE

注： IE8以上和非IE浏览器才支持:after，原理和方法1（.clearfix）有点类似，zoom(IE转有属性)可解决ie6,ie7浮动问题  

3.父级div定义:overflow:hidden

#div1 : { width :  98 %; overflow :  hidden ; }

#div2 : { width :  98 %; }

注：必须定义width或zoom:1，同时不能定义height，使用overflow:hidden时，浏览器会自动检查浮动区域的高度 

优点：简单、代码少、浏览器支持好 

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

4.父级div定义:overflow:auto

#div1 : { width :  98 %; overflow : auto ; }

#div2 : { width :  98 %; }

与 overflow:hidden 相似

5.父级div定义:display:table

#div1{
    width: 98%;display: table;

}

#div2 : { width :  98 %; }

6.父级div页一起浮动

#div1{
    width: 98%;float:left;

}

#div2 : { clear :both; }

原理：所有代码一起浮动，就变成了一个整体 
缺点：会产生新的浮动问题。 

7.父级div定义height

#div1{
    height: 200px;

}

原理：父级div手动定义height，就解决了父级div无法自动获取到高度的问题。 
优点：简单、代码少、容易掌握 
缺点：只适合高度固定的布局，要给出精确的高度，如果高度和父级div不一样时，会产生问题 

8.结尾添加空标签

<div id="div1" class="clearfix">
    <div class="left">left</div>
    <div class="right">right</div>
    <div class="clr"></div>
</div>
<div id="div2">
    div2
</div>

style:

.clr{ clear: both;}
原理：添加一个空div，利用css的clear:both清除浮动，让父级div能自动获取到高度 
优点：简单、代码少、浏览器支持好、不容易出现怪问题 

缺点：会添加无意义的元素；如果页面浮动布局多，就要增加很多空div

9.结尾加br标签 clear:both

<div id="div1" class="clearfix">
    <div class="left">left</div>
    <div class="right">right</div>
    <br class="clearfloat"/>

</div>
<div id="div2">
    div2
</div>

style:

.clearfloat{ clear: both;}