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