CSS清除浮动的几种方法

1、父级div定义height 

<style type="text/css">
 .div1{background:#000080;border:1px solid red;height:200px;}
    .left{float:left;width:20%;height:200px;background:#DDD}
    .right{float:right;width:30%;height:80px;background:#DDD}
</style>
<div class="div1">
 <div class="left">Left</div>
 <div class="right">Right</div>
</div>

父级div手动定义height，就解决了父级div无法自动获取高度的问题（只建议高度固定的布局使用）

2、结尾处加空div标签 clear:both

<style type="text/css">
 .div1{background:#000080;border:1px solid red}
    .left{float:left;width:20%;height:200px;background:#DDD}
    .right{float:right;width:30%;height:80px;background:#DDD}
    .clearfloat{clear:both}
</style>
<div class="div1">
 <div class="left">Left</div>
 <div class="right">Right</div>
 <div class="clearfloat"></div>
</div>

添加一个空div，利用css提高的clear：both清除浮动，让父级div自动获取高度（以前使用的较多）

3、父级div定义伪类:after和 zoom

<style type="text/css">
 .div1{background:#000080;border:1px solid red;}
    .left{float:left;width:20%;height:200px;background:#DDD}
    .right{float:right;width:30%;height:80px;background:#DDD}
    .clearfloat:after{display:block;clear:both;content:"";visibility:hidden;height:0}
    .clearfloat{zoom:1}
</style>
<div class="div1 clearfloat">
 <div class="left">Left</div>
 <div class="right">Right</div>
</div>

IE8以上和非IE浏览器才支持:after,zoom(ie专有属性)可解决IE6、IE7浮动问题

4、父级div定义 overflow:hidden

<style type="text/css">
 .div1{background:#000080;border:1px solid red;width:98%;overflow:hidden}
    .left{float:left;width:20%;height:200px;background:#DDD}
    .right{float:right;width:30%;height:80px;background:#DDD}
</style>
<div class="div1">
 <div class="left">Left</div>
 <div class="right">Right</div>
</div>

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

5、 父级定义: overflow:auto

<style type="text/css">
 .div1{background:#000080;border:1px solid red;/*解决代码*/width:98%;overflow:auto}
    .left{float:left;width:20%;height:200px;background:#DDD}
    .right{float:right;width:30%;height:80px;background:#DDD}
</style>
<div class="div1">
 <div class="left">Left</div>
 <div class="right">Right</div>
</div>

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

6、父级div也一起浮动

<style type="text/css">
 .div1{background:#000080;border:1px solid red;width:98%;margin-bottom:10px;float:left}
    .left{float:left;width:20%;height:200px;background:#DDD}
    .right{float:right;width:30%;height:80px;background:#DDD}
</style>
<div class="div1">
 <div class="left">Left</div>
 <div class="right">Right</div>
</div>

所有代码一起浮动，会产生新的浮动，仅作了解

7、父级div定义 display:table 

<style type="text/css">
 .div1{background:#000080;border:1px solid red;width:98%;display:table;margin-bottom:10px;}
    .left{float:left;width:20%;height:200px;background:#DDD}
    .right{float:right;width:30%;height:80px;background:#DDD}
</style>
<div class="div1">
 <div class="left">Left</div>
 <div class="right">Right</div>
</div>

将div的属性变成表格

8、结尾处加 br标签 clear:both 

<style type="text/css">
 .div1{background:#000080;border:1px solid red;margin-bottom:10px;zoom:1}
    .left{float:left;width:20%;height:200px;background:#DDD}
    .right{float:right;width:30%;height:80px;background:#DDD}
    .clearfloat{clear:both}
</style>
<div class="div1">
 <div class="left">Left</div>
 <div class="right">Right</div>
 <br class="clearfloat" />
</div>

父级div定义zoom：1来解决IE浮动问题，结尾处加br标签clear：both