关于浮动的一些个人见解

一、什么是浮动——float：

html文件在浏览器中是逐行渲染下来的，所以页面中普通的文档流中的元素，也是从上到下，从左到右按照自己的规则逐行排列下来的，这便形成了最基本的网页渲染规范。但是在这种规范下，有些个性化的排列需求就很难完成，最简单的就比如：两列布局。

还有一种需求是这样的，同一行里面同时存在需要左对齐和右对齐的元素。

一种比较死板的方法是通过设置margin或padding在两元素之间留出空隙，使得它们看起来像是分别左右对齐了。如果两元素和父元素的结构（主要是宽度）比较稳定的话，这么做勉强可以解决问题，但是通常情况下，元素宽度通常都会经常发生变化的，这么做就不能保证真正的左右对齐。

这两个例子都在说明一个问题，就是页面中的元素有时候需要它改变原来的排布规律，使得它能够不按照普通的文档流来排布。这就是浮动——float的作用：改变元素在文档流中的位置。这确实是一个非常重要的作用，它使得页面能够呈现更复杂的布局。同样，要完全驾驭它也需要对它的原理充分的了解，不然在使用过程中就会出现许多意料之外的问题，就需要经常的调试，所以我们对float到底做了什么，要有非常深刻的认识，这样才能够避免出现这样那样的问题，省掉调试的时间。具有同样作用的还有relative和absolute定位，这两个之后再进行对比说明。

二、float做了什么：

我们先来看看w3c school的解释：

浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。

由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样。

我们注意最后一个描述：就像浮动框不存在一样！事实上真的是这样的吗？并不是！真正能做到“不存在的”是absolute定位。而float显然有着不一样的效果。我们再看看w3c Recommendation（http://www.w3.org/TR/CSS2/visuren.html#floats）里面的相关解释。可以很容易看到这样一句话：

Since a float is not in the flow, non-positioned block boxes created before and after the float box flow vertically as if the float did not exist. However, the current and subsequent line boxes created next to the float are shortened as necessary to make room for the margin box of the float.

However，。。。后半句是w3c school上没有翻译出来的，再加上他上面给的例子，很容易让人误解为float元素真的对它的相邻元素不会有任何影响了（这里说的相邻元素没有进行任何定位，而且是指在html文档中是相邻定义的。相邻元素也有float属性的情况w3c的解释很清楚，这里不讨论），就是简单的覆盖上去。实际上，这句没被翻译出来的话意思大致是：为了给浮动元素腾出空间，当前和紧随浮动元素其后创建的行框，会进行必要的缩短。其实用例子说明就非常好理解了：文字包围图片。如下图：

之所以会有这样的显示效果就是因为上面未翻译的后半句话。可以看出浮动框不在文档的普通流中，这是没错的，我将它的相邻元素<p>balabala...</p>的背景设成了上图的灰色，可以看出图片是处在了整个<p>元素的上方没错，但是表现出来绝不是就像它不存在一样，它对<p>元素的内容产生了影响，<p>元素要为它腾出必要的空间。这就是它与absolute定位的区别之一。下图是将图片进行absolute定位的效果，可以看出区别。absolute是真正的覆盖在了紧邻元素的上方：

。

那么，到底该怎么理解float元素以及它的相邻元素的表现呢？我是这么理解的：float元素脱离了普通的文档流，紧邻其后的非浮动元素当作它不存在一样，在页面上开始布局，但是它的内部要先为该浮动元素腾出空间，然后才从浮动元素所处的行开始，排列它的内部元素，至于内部元素的排列规则则不受影响，在行内能排下的就排下，排不下的会自动换行直到能排下为止。说到这里还有个很有趣的情况，那就是给<p>加个margin-left属性，并在各个浏览器的调试器中不断增加或者缩小它的值，会发现firebug和chrome还有ie会有不同的处理方法。

有时候相邻元素并不是这种简单的文字段落，可能是包含了更复杂结构的元素，所以就经常会碰到意想不到的排列效果，比如布局紊乱，设置maigin无效等等。现在我们知道了造成这种奇怪布局的原因是因为float，那么我们也就能理解为什么相应的会有clear属性来清除浮动了，就是为了清除掉浮动元素带来的影响，使得之后的元素的排布能够更清楚的在我们掌握之中。同样的，由于float元素脱离了普通文档流，所以如果一个容器里面的所有元素都设置了float属性，那么会造成容器里面没有普通流元素，而使得该容器“撑不开”。这就是经典的闭合浮动的问题，被讨论得非常多，在这里就不多说了。

三、float和relative、absolute定位的异同：

上面提到，float和relative、absolute定位都是为了改变元素在文档流中的位置，都会让元素“浮”起来。它们也有不一样的地方，relative和absolute定位会激活元素的left，top，bottom，right属性，还可以通过z-index来改变元素所处的层，而float元素仍然还是处在0层的，也不能通过z-index来改变。另一个有趣的现象，absolute和float会隐式得改变元素的display类型，不论元素之前是什么类型（display：none除外）。只要设置了absolute或者float任意一个，都会让元素以display：inline-block的方式显示：可以设置长宽，默认宽度不占满父元素，relative则不会。

四、总结：

float定位给了我们更加灵活的布局方式，但同样的，没有完全理解float布局的原理，会带来非常大的麻烦。许多浏览器的兼容性问题和布局问题也都是因为float引起，所以一定要深刻体会。谨以此文，作为一个学习笔记！