关于浮动与清除浮动.doc

关于浮动与清除浮动 在css2里，浮动（float）这个属性是个经典又诡异的一个属性，历来对它的争议就不断。从语义上讲：float这个属性顾名思义，既然叫浮动，咱们不妨把它与船体在水中的浮动联系起来。即可以这样假设，document为一个水 箱，document的文档流就是水箱里的一层水，这层水的厚度无限接近于零，而所有在文档流中的元素都是在这层水中进行排列的，他们都有各自的占位空 间，所以不允许有任何的交叠。而，float浮动，就恰好使原本在文档流这层水中的元素浮于水的表面（即脱离的文档流），说法不一定准确，因为浮动是否是真正的脱离的文档流 还有待考究。一旦脱离的文档流后，该元素的占位空间自然也就没有了，但是这里会有一个诡异的地方，所谓的没有占位空间，那么就应该是元素可以自由的交叠。 比如像position:absolute的那种。但是对于浮动的元素而言，会稍微有些区别。浮动的元素，高度会塌陷，这可以理解为占位空间消失造成的，同时高度塌陷也是我们布局中需要清除浮动的最重要的原因之一。但是浮动的元素宽度却处在一个“半塌陷”的状态，为什么说是“半塌陷”呢？请看下面图例：这是在没有浮动的情况下，上面代码表现。如果灰色的区域左浮动的话，会是下面的表现：且慢，如果说宽度的占位还在的话，那么我们不妨对标签设置个margin-left或者padding-left看看如下：其实运行结果和没有设置padding值一样的。除非padding-left或者margin-left的值大于浮动块宽度（200px）时，我们再看看：如下：这下可以看出来了，这就是我说“半塌陷”的原因，说是没塌陷吧，那么元素就应该距浮动灰块250px才对，说是塌陷了吧，那 么在没有padding-left和margin-left值的时候都应该和浮动块重叠才对。这是float的诡异处之一。按本人的理解，其实可以这样解释这个现象，这里要引入一个自创的词：“占位空间层级”。是的，引入占位空间层级这个概念之后，针对float这 个元素，我们不妨可以这样假定：没有浮动的元素（即在文档流中的）的占位空间层级为0,有浮动的元素（指float:left或right;不包括 none）的占位空间层级为1。这样就可以解释刚才我们的的padding和margin值都是在层级为0的占位空间中解析的，而所有 的浮动元素由于都在同一个层级的占位空间中，所以浮动元素之间的margin和padding值的解析是和我们正常理解是一致的。至于为什 么不和浮动块重叠，那是因为占位空间层级的分界线和文档流基线不是同一个！以下为一个简易的示意图：清除浮动：说了这么多浮动的东西，其实我们平时接触最多的问题，还是清除浮动的问题。当初css的发明者之所以会创造clear这个属性，就是因为 float太过诡异，与文档流的层级标准都不统一，导致很难包容float所导致的负面影响，所以只能再造一个clear属性，强制清除float带来的 后遗症。说到这里，我很同意一为同仁说的，我们平时说的“清除浮动”准确的说应该是“清除浮动造成的影响”，真正的清除浮动应该是float:none;说到清除浮动造成的影响，又不得不说一下Dom元素的“包裹性”，因为在我们的实际编码中，用clear来清除浮动已经很少见了。我记得很早 前，那时候清除浮动就是在需要清除浮动的元素下面加个空元素，然后样式设置为clear:left或者right或both,但在如今越来越讲究web标 准以及代码结构和语义化的时代，用空标签这种既破坏结构有没语义的方法已经显得很傻很天真了。因为经过人们不懈的实践，发现用包裹性来清除浮动造成的影响 是更好的一种方式。其他的先不多说，先看看除了空标签清除浮动外的其他几种方式吧。 view sourceprint?01/* 通过overflow的方式 */02.overflow-clear03overflow:auto;/*或者 hidden,scroll,不包括visible */04_height:1%; /*设置高度是为了ie6获取haslayout */0506/* display 的方式*/07.display-clear08display:inline-block;0910/* position的方式 */11.position-clear12position:absolute;1314/* 浮动方式 */15.float-clear16float:left; /*或者right，不是none就行*/1718/*zoom 的方式*/19.zoom-clear20zoom:1;/* only for IE6.7 因为他们haslayout，ie8以后和标准浏览器都弱化了haslayout */2122/*after伪类+content方式*/23.clearfix:after 24content: .;25display: block;26height: 0;27clear: both;28visibility: hidden;2930/* Hides from IE-mac */31.clearfix height: 1%;32/* End hide from IE-mac */上面几种方式都有清除浮动影响的作用，前四种是和最后一种在ie678和其他标准浏览器下都有效地方法，zoom因为用到了ie的haslayout，所以只在ie6/7的内核下才有效。随便举一例，如下：view sourceprint?123我是文案4运行的结果如下：可见确实是清除了浮动造成的影响。同样的可以试试其他的几种方式。清除浮动原理-包裹性：说到包裹性，在这里面的鼻祖应该算是diaplay:inline-block;其他的像 overflow，position:absolute,float这几个产生包裹性的原因，本质应该都是因为他们使Dom元素具有了类似inline- block的性质，所以，凡是设置了像display:inline-block或者overflow:hidden/scroll/auto或者 position:absolute或者float:left/right这几个属性时，他们具有的包裹性都可以清除他们子元素浮动造成的影响。-haslayout这是ie私有的一个东西，不过随着ie8像标准浏览器靠近，它对haslayout的解析也弱化了很多。我们来看看用overflow，zoom，和after伪类这几个清除浮动的方式。通过测试可以看到，display:inline-block,position:absolute,float:left/right 都把包裹性演绎的很好，但是overflow对包裹性的演绎没那么到位，所以导致ie6下必须强制获取Dom元素的haslayout才能生效。在ie下，只要我们对一个非inline级别的元素设置width或者height都可以触发他的haslayout，而且，在windows 的ie下有个“auto-clearing”的特性：只要给容器一个尺寸，它能使容器自 动扩展以便适应它所包含的内容，即便给它的尺寸非常小，所以1%的height在任何情况都是扩展高度适应它的内容。这就