css清除浮动各方法与原理

说到清除浮动的方法，我想网络上应该有不下7,8的方法，介绍这些方法之前，想下为什么清除浮动？

再次回到float这个属性，浮动元素（floats）会被移出文档流，不会影响到块状盒子的布局而只会影响内联盒子（通常是文本）的排列。

这就产生了一个问题：浮动元素所在父元素不会自动伸长以便闭合浮动元素，任其“红杏出墙”，这显然不符合我们的“伦理观”，所以要“抓回来”施以家法；那么如何抓呢？

提起css，提起(x)html,首先进入脑海的是楚楚动人的页面吗？不，首先应该是这楚楚动人的页面的背后的“楚楚冻人”吧，那些可恨的梦魇般的浏览器兼容！！！

浏览器中可以自动完成闭合浮动元素的情况：

标准浏览器中可以自动完成闭合浮动元素的方法，在标准浏览器中，这称之为Block-Formatting-Contexts（块格式化上下文）：

a.浮动元素；

b.拥有绝对定位属性的元素；

c.设置inline-block元素；

d.table-cell元素;

e.设置了overflow的元素，比如：auto/hidden。

【注】CSS3中，将Block-formatting-contexts 叫做 flow root。

对于触发方式也做了修改：The value of ‘position’ is neither ‘static’ nor ‘relative’；

那么在IE/win中，就依靠那个“hasLayout”了，触发“layOut”的方法有：

a.浮动元素

b.绝对定位元素

c.display:inline-block

d.zoom：比如常见的设置zoom：1；

e.width/height,比如设置height：1%的方法；

f.overflow/overflow-x/overflow-y [IE7 新增]；

g.max/min-width/height [IE7 新增]；
      
        以上种种方法，要么IEonly，要么cross的情况不理想，于是就产生了适用性方法的需求，尽管有时你可能需要些许hack；

（1）空标签法：

       这种方法应该说是最简单的一种了，W3C建议在容器的末尾增加一个“clear:both"的元素，

　　强迫容器适应它的高度以便装下所有的float，并没限制使用什么样的标签，有用

<br style="clear:both" />

的，有用空

1. <div style="clear:both"></div>

的;比如：

    <div>
    <div style ="float:left; width:40%;" >
    <p> Some content </ p >
    </div>
    <p> Text outside the float </p>
    <div style ="clear:both;" ></div>
    </div>

     （2）父元素使用overflow的方法：
       通过设置父元素overflow值设置为hidden或者auto；不过，在<=IE6中使用这个方法，还需要haslayout，

　　还有，使用overflow=hidden的时候，一旦你有定位需求可能会因此而难以实现，使用这种方法前你应该至少确定：

a.父元素的height是自适应的；

b.浮动元素的宽度不大于父元素的宽度，即没有溢出需求；所以，这种方法也有它的局限性；

<div style ="overflow:hidden; width:100%;">
<div style ="float:left;width:30%;">
<p>the widths of the combined floats never exceed the width of the container</p>
</div>
</div>

（3）伪类:after

       这种方法应该说是目前应用最广泛的方法，它的优势：没有多余的标记添加到容器中；通过使用:after产生的content不能接受某些属性，包括'position','float',列表属性，表格属性，但是clear属性可以被接受。

不过，不幸的是，IE不支持:after方法，但又幸运的是，回顾前面，如果IE在父容器拥有Width/Height等layout状态下，会完成自动闭合，称之为“auto-clearing”；那么，对于IE/win，我们使用设定zoom：1的方法的方法来实现和:after一样的效果.于是

一个类似这样的样式出现了：

    .clearfix:after{content:".";display:block;height:;clear:both;visibility:hidden;}
    .clearfix{zoom:;}
    <div class="clearfix"><div style ="float:left;width:30%;" ><p>take :after</p></div>