浅谈CSS清除浮动（ClearFix）的方法

在很多开发过程中，常常会用到浮动流来弥补标准流布局所难以实现或者不合适的缺陷。但如果一味地使用浮动流进行布局，其产生的副作用足够大之时，就难免会遇到一些“尴尬”和棘手的问题。

什么是清除浮动？

在非 IE 浏览器（如 Chrome）下，当容器的高度为auto，且容器的内容中有浮动（即CSS配置有float:left或right）的元素，在这种情况下，容器的高度不会自动伸长以适应内容的高度，所以里面的内容溢出到容器外面而影响（甚至破坏）布局，这个现象称为浮动溢出。
为了避免这个现象的发生，消除其带来的负面影响而进行的一些CSS处理，称为清除浮动。

为什么要清除浮动？

可以很简洁地说，清除浮动就是为了清除浮动元素产生的不良影响。

浮动带来的负面影响

1、背景无法显示
由于浮动的设置，如果对父级设置了CSS 背景 background、CSS背景颜色或CSS背景图片，则父级元素将不能被撑开，所以导致CSS背景不能显示。

2、边框无法撑开
如果父级设置了CSS边框 border 属性，由于子级里使用了float属性，产生浮动，父级不能被撑开，导致边框不能随内容而被撑开。

3、margin、padding 设置值无法正确显示
由于浮动的设置，导致父级子级之间设置了 margin 或 padding 属性的值不能正确表达。特别是上下边的padding和margin不能正确显示。

举些例子：

1. 块状元素钻到浮动元素底面，被其所覆盖：

2. 浮动元素的父元素坍缩：

上面说的不够详细，这里再举个实际的例子：

有2个div，各个div里都有3个写有文字的p标签，完成初始化配置后是这个样子的：

代码：

<style>.box1{    background-color:green;}.box2{    background-color:yellow;}.box1>p{    background-color:red;}.box2>p{    background-color:blue;}</style><div class="box1">     <p>Hello world!</p>    <p>Hello world!</p>    <p>Hello world!</p></div> <div class="box2">     <p>Hello world!</p>    <p>Hello world!</p>    <p>Hello world!</p></div>

效果如图：

还没完，这只是开始。现在，要求将2个div里的p都左浮动显示。

p{    float: left;}

本以为应是这样：

结果却是这样的：

Whhhhat the … ?
像产生这种难看的效果全因布局没做对，之前使用了左浮动float:left产生的负面影响没有消除。还好，我们有以下几种不错的方法可以解决这个问题。

清除浮动的方法

1. 给父元素设置一定的高度height

   <style>.box1{     height: 100px;} .box2{     height: 100px;} 

   效果如下：

   

   将背景颜色除去，效果就正如我们想要的那样。
   但是，这种方法太过僵硬，一般在开发过程中不建议自设高度。

2. 使用CSS的 clear 属性

   clear 属性规定元素的哪一侧不允许其他浮动元素。

   clear可能的值：

   left      在左侧不允许浮动元素。

   right    在右侧不允许浮动元素。

   both    在左右两侧均不允许浮动元素。

   none    默认值。允许浮动元素出现在两侧。

   inherit   规定应该从父元素继承 clear 属性的值。

3. 使用“隔墙法”

   所谓“隔墙法”是指在元素里面或外面添加一堵“墙”，即块元素，通过对其配置一定的CSS属性，以达到清除浮动的目的。

   隔墙法又分为两种：
   A. 外墙法：在元素与元素之间新增一个块元素，并设置clear属性。

   <style>    .clearfix{        clear: both;    }</style><div class="box1"> ... </div><div class="clearfix"> </div><div class="box2"> ... </div>

   

   然而需要注意的是，位于新增的块元素（“墙”）前面的元素无法使用margin-bottom，而后面的元素却可使用margin-top。这里不作演示，留给大家自己尝试吧！

   B. 内墙法：在父元素里的所有子元素之后新增一个块元素（即父元素的last-child），并设置clear属性。

   <style>    .clearfix{        clear: both;    }</style><div class="box1">     <p>Hello world!</p>    <p>Hello world!</p>    <p>Hello world!</p>    <div class="clearfix"></div></div> <div class="box2"> ... </div>

   

   幸运的是，这个方法可以使位于新增的块元素（“墙”）前面的元素使用margin-bottom，后面的元素也可使用margin-top。这里也不作演示，留给大家自己尝试吧！

   虽然隔墙法可以很好的实现清除浮动，但也带来不好的一点：增加了额外多余的标签。

4. 使用 :after伪元素

   对使用了浮动流的元素进行:after配置，常见的典型的代码段如下：

   <style>.box1{ ...}.box1:after{content: "";             /*内容设置为空！！！*/display: block;        /*显示为块级元素！！！*/height: 0;visibility: hidden;  clear: both;         /*清除浮动！！！*/}</style>

   p.s. 以上注释部分的代码为必须，一般情况下，通过3行代码 content: ""; display: block; clear: both; 便可实现。

   效果也正如上面的内墙法一样：

   
   需要注意的是，如果在IE6和IE7浏览器上使用，则需给clearfix添加一条属性以触发haslayout。

   <style>.box1:after{...zoom: 1;}</style>

   这个方法所能体现的优点：1. 避免了多余标签的使用； 2. 可以兼容大部分浏览器。

5. 使用 overflow 属性

   通过给浮动元素添加 overflow 属性并设置为hidden或者auto即可清除浮动。

   <style>.box1{    ...    overflow: hidden;}</style>

   Or

   <style>.box1{    ...    overflow: auto;}</style>

   效果也如上面一样：
   

   另外，在 IE6 中还需要触发 hasLayout ，需要为父元素设置容器宽高或添加zoom:1。

6. 给父元素设置display: table

   虽然也可以解决浮动问题，但缺点亦随之而来：盒模型属性已经改变，由此产生一系列烦人的问题，得不偿失，不推荐使用。

扩展 & 延伸

以上几种方法并没有按照比较严谨的技术规范进行分类。只是为了方便大家使用，根据方法的优越度和优先度来阐述，这样大可便于在不同的场合采用比较合适的方法去解决实际的问题。因此没有多做复杂的说明。

其实，所谓的清除浮动的方法可以分为两类：

1. 清除浮动：清除对应的单词是 clear，对应CSS中的属性是 clear：left | right | both | none；
2. 闭合浮动：更确切的含义是使浮动元素闭合，从而减少浮动带来的影响。其中涉及的原理有：hasLayout 和 Block formatting contexts 。

详情请点击这里进行跳转查阅。