CSS清除浮动的几种方法

上一篇博客中提到过css中可以通过设置父元素BFC化的方式来清除浮动，

地址http://www.cnblogs.com/adventureofraindrop/p/6123264.html

这几种方法其原理都是共通的，但它们虽然都达到了清除浮动的作用，同时也带来了其他的问题，因此在实际应用中有些并不常用，有些视具体情形才可以使用。

那么有清除浮动有多少种方法呢？有哪些比较好用不会造成其他问题的方法呢？

首先我们总结一下清除浮动几种方法的分类，笔者总结后将它们分为以下几类：

1.BFC清除浮动

详细方法可见上图，共有四种

2.设置父元素height

父元素有了定义的高度后，就不会出现内部元素浮动后因无法获取高度而发生高度坍塌的问题。

3.使用clear：both

有两种用法。一种是在父级div末尾添加一个空div，设置clear：both；另一种是父级div末尾添加一个br标签，同样设置clear：both。

4.after伪类和zoom：1

这种方法是为父级div设置after伪类，达到清除浮动的效果，原理与前一种方法类似。

特别需要注意的是，以上四类方法只是思路，因为兼容性问题等，并非具体实现代码！

下面才是这几种方法的具体实现代码及兼容情况和优缺点（按实用程度大致排先后）：

一：推荐使用

1.父级div定义clearfix类，利用after伪类和zoom清除浮动

首先看代码

<style type="text/css"> 
.div1{background:#000080;border:1px solid red;} 
.div2{background:#800080;border:1px solid red;height:100px;margin-top:10px} 
.left{float:left;width:20%;height:200px;background:#DDD} 
.right{float:right;width:30%;height:80px;background:#DDD} 
/*清除浮动代码*/ 
.clearfix:after{display:block;clear:both;content:"";height：0；visibility：hidden；} 
.clearfix{zoom:1} 
</style> 
<div class="div1 clearfix"> 
<div class="left">Left</div> 
<div class="right">Right</div> 
</div> 
<div class="div2"> 
div2 
</div>

兼容：IE8以上和非IE浏览器支持after伪类，zoom为IE专有属性，两种配合使用能适用于大部分浏览器。

优点：浏览器支持好，是当前最常用的清除浮动方法

缺点：原理对于初学者难懂，推荐这篇博客http://blog.sina.com.cn/s/blog_60b35e830101c1r8.html

使用：推荐使用，建议在项目中定义公共clearfix类，减少css代码。

二、视具体情形使用

2.父级div定义overflow:hidden

<style type="text/css"> 
.div1{background:#000080;border:1px solid red;/*解决代码*/width:98%;overflow:auto} 
.div2{background:#800080;border:1px solid red;height:100px;margin-top:10px;width:98%} 
.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 class="div2"> 
div2 
</div>

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

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

缺点：不便与position配合使用，超出部分会被隐藏

建议：推荐不使用position的情况或对overflow理解掌握较深时使用

3.父级div定义高度

<style type="text/css"> 
.div1{background:#000080;border:1px solid red;/*解决代码*/height:200px;} 
.div2{background:#800080;border:1px solid red;height:100px;margin-top: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 class="div2"> 
div2 
</div>

优点：原理简单，代码少

缺点：只适用于高度固定的布局，内部元素高度超出时会产生其它问题

建议：高度固定时可使用，其它场景避免使用

4.父级定义overflow：outo

代码及原理都类似于方法2，只是将overflow：hidden改为overflow：auto

缺点：超出部分会出现滚动条

建议：需要滚动条或者高度控制到可以确保不出现滚动条的情况使用

三、不推荐使用

在对代码要求越发严格的今天，内容结构分离，语义化都是重要的内容，因此不推荐使用以下方法，可作为了解

5.结尾处加空标签clear：both

<style type="text/css"> 
.div1{background:#000080;border:1px solid red} 
.div2{background:#800080;border:1px solid red;height:100px;margin-top:10px} 
.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 class="div2"> 
div2 
</div>

原理：添加一个空div，利用clear：both清除浮动，让父级div能自动获取到高度

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

缺点：如果页面浮动布局较多，会添加很多无意义标签，对文档结构不友好

建议：不推荐使用，是以前主要的清除浮动方法

6.结尾处加br标签

原理、代码等同方法5，同时必须定义父级元素zoom：1

推荐：了解即可

7.父级div也一起浮动

<style type="text/css"> 
.div1{background:#000080;border:1px solid red;/*解决代码*/width:98%;margin-bottom:10px;float:left} 
.div2{background:#800080;border:1px solid red;height:100px;width:98%;/*解决代码*/clear:both} 
.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 class="div2"> 
div2 
</div>

原理：父级div一起浮动，就变成了一个整体

缺点：会产生新的浮动问题

建议：不推荐使用

8.父级div定义display：table

<style type="text/css"> 
.div1{background:#000080;border:1px solid red;/*解决代码*/width:98%;display:table;margin-bottom:10px;} 
.div2{background:#800080;border:1px solid red;height:100px;width:98%;} 
.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 class="div2"> 
div2 
</div>

原理：父级divBFC化清除浮动

优缺点未知

最后

本文由笔者总结，参考了http://www.jb51.net/css/173023.htmlCSS清除浮动大全共8种方法这篇文章

，感谢前人栽阴！