浮动清除方法大全及优缺点解析

对于一个web前端工程师来说浮动清除是我们的必修课，如何精益求精将代码写到极致，小编觉得我们必须花时间多对比、多揣摩。遍搜网络，清除浮动的方法大致有一以下几种方法：

方法1：给父级div定义高度

代码如下：

1 <style type=”text/css”>
2 .div1{background:#000;border:1px solid red; /*解决代码*/height:200px;}
3 .div2{background:#f00;border:1px solid red;height:100px;margin-top:10px}
4 .left{float:left;width:20%;height:200px;background:#DDD}
5 .right{float:right;width:70%;height:80px;background:#DDD}
6 < /style>

<div class=”div1″>
<div class=”left”>我是左浮动</div>
<div class=”right”>我是右浮动</div>
</div>
<div class=”div2″>我是div2</div>

原理：给父级DIV定义固定高度（height），能解决父级DIV 无法获取高度得问题。
优点：代码简洁
缺点：高度被固定死了，是适合内容固定不变的模块。（不推荐使用）

方法2：DIV闭合处，加<div class=”clear”></div> (.clear{clear:both})

代码如下：

1 <div class=”div1″>
2 <div class=”left”>我是左浮动</div>
3 <div class=”right”>我是右浮动</div>
4 <div class=”clear”></div>
5 </div>
6 <div class=”div2″>我是div2</div>

原理：添加一对空的DIV标签，利用css的clear:both属性清除浮动，让父级DIV能够获取高度。
优点：浏览器支持好
缺点：多出了很多空的DIV标签，如果页面中浮动模块多的话，就会出现很多的空置DIV了，这样感觉视乎不是太令人满意。（不推荐使用）

方法3：结尾处加 br标签<br class=”clear”/> (.clear{clear:both})

代码如下：

1 <div class=”div1″>
2 <div class=”left”>我是左浮动</div>
3 <div class=”right”>我是右浮动</div>
4 <br class=”clear” />
5 </div>
6 <div class=”div2″>我是div2</div>

原理及有优缺点同方法2，可做了解，亦不推荐使用。

方法4：让父级div 也一并浮起来

这样做可以初步解决当前的浮动问题。但是也让父级浮动起来了，又会产生新的浮动问题。不推荐使用

方法5：父级div定义 display:table

原理：将div属性强制变成表格
优点：不解
缺点：会产生新的未知问题。（不推荐使用）

方法6父元素设置 overflow：hidden；

 1 <style type=”text/css”>
 2 .div1{background:#000;border:1px solid red; /*解决代码*/overflow:hidden;zoom:1}
 3 .div2{background:#f00;border:1px solid red;height:100px;margin-top:10px}
 4 .left{float:left;width:20%;height:200px;background:#DDD}
 5 .right{float:right;width:70%;height:80px;background:#DDD}
 6 </style>
 7  
 8 <div class=”div1″>
 9 <div class=”left”>我是左浮动</div>
10 <div class=”right”>我是右浮动</div>
11 </div>
12 <div class=”div2″>我是div2</div>

原理：通过设置父元素overflow值设置为hidden；在IE6中还需要触发 hasLayout（zoom：1）
优点：代码简介，不存在结构和语义化问题
缺点：无法显示需要溢出的元素（亦不太推荐使用）

方法7父元素设置 overflow：auto；

原理：原理同方法6，在IE6中还需要触发 hasLayout（zoom：1）
优点：代码简介，不存在结构和语义化问题
缺点：firefox早期版本会无故产生focus，多个嵌套后，firefox某些情况会造成内容全选；IE中 mouseover 造成宽度改变时会出现最外层模块有滚动条等。

方法8：父级div定义伪类:after 和 zoom

代码如下：

 1 <style type=”text/css”>
 2 .div1{background:#000;border:1px solid red; /*解决代码*/overflow:hidden;zoom:1}
 3 .div2{background:#f00;border:1px solid red;height:100px;margin-top:10px}
 4 .left{float:left;width:20%;height:200px;background:#DDD}
 5 .right{float:right;width:70%;height:80px;background:#DDD}
 6 .clearfix:after { content: “.”;display: block;height: 0;clear: both;visibility: hidden; }
 7 .clearfix {zoom:1;}
 8 </style>
 9  
10 <div class=”div1 clearfix”>
11 <div class=”left”>我是左浮动</div>
12 <div class=”right”>我是右浮动</div>
13 </div>
14 <div class=”div2″>我是div2</div>

原理：IE8以上和非IE浏览器才支持:after，原理和方法2有点类似，zoom(IE转有属性)可解决ie6,ie7浮动问题
优点：结构和语义化完全正确,代码量也适中，可重复利用率（建议定义公共类）
缺点：代码不是非常简洁（极力推荐使用）

本方法进益求精写法

相对于空标签闭合浮动的方法代码似乎还是有些冗余，通过查询发现Unicode字符里有一个“零宽度空格”，也就是U+200B，这个字符本身是不可见的，所以我们完全可以省略掉 visibility:hidden了
.clearfix:after {content:”200B”; display:block; height:0; clear:both; }
.clearfix { *zoom:1; } 照顾IE6，IE7就可以了