[css]css之浮动与清除浮动各方法原理介绍

浮动，显然是css运用的非常广泛的属性之一，然而，Float（浮动）概念却也成为CSS中最让人迷惑的一个概念。它经常被错误理解而由此带来的可读性、可用性问题备受诟病，但是，到底是因为Float自身的问题还是我们使用者对这个属性的误解而产生如此之多的对这个属性的指责，下面有几篇文章关于float的，（中文翻译过些时候会放上来，现在还差一点点没有完成，E文Ok的最好了，^^）；
a.[Containing Floats]:http://www.complexspiral.com/publications/containing-floats/

b.[Floatutorial: Float Basics]:http://css.maxdesign.com.au/floatutorial/introduction.htm

c.[W3C标准关于float的描述]:http://www.w3.org/TR/CSS2/visuren.html#floats

d.[CSS Positioning:float]:http://www.brainjar.com/css/positioning/default2.asp

说到清除浮动的方法，我想网络上应该有不下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”/>的，有用空<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的时候，一旦你有定位需求可能会因此而难以实现，按照PPK的说法，使用这种方法前你应该至少确定：

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）父元素也设置浮动（float-in-float）

把父元素也设置浮动属性，不过，这种方法使得与父元素相邻的元素的布局会受到影响，有选择把页面中的所有元素都浮动起来，最后使用一个适当的有意义的元素（比如页脚）进行清理浮动，这有助于减少不必要的标记，但是过多的浮动会增加布局的难度。

<div style ="float:left; width:100%;">
<div style ="float:left;width:30%;" >
<p>all the elements float</p>
</div>
</div>

（4）伪类:after

这种方法应该说出现在overflow之前，它的优势:没有多余的标记添加到容器中；通过使用:after产生的contant不能接受某些属性，包括'position','float',列表属性，表格属性，但是clear属性可以被接受。
不过，不幸的是，IE不支持:after方法，但又幸运的是，回顾前面，如果IE在父容器拥有Width/Height等layout状态下，会完成自动闭合，称之为“auto-clearing”；那么，对于IE/win，我们使用设定zoom：1的方法的方法来实现和:after一样的效果；

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

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