float 属性的本质理解

float 出现的意义其实只是用来让文字环绕图片而已，仅此而已。而我们目前用 float 实现页面布局本不是 float 该干的事情。

float 属性（无论是左浮动还是右浮动）某种意义上而言与 display:inline-block 属性的作用是一模一样的，所以类似于 display:block; float:left; 的CSS代码超过95%的情况是没有道理的( display:block 是多余的)。然而，float无法等同于 display:inline-block，其中原因之一就是浮动的方向性，display:inline-block 仅仅一个水平排列方向，就是从左往右，而float可以从右往左排列，这就是两者的差异。然而，我们又有多少情况需要元素从右往左排列呢？很少。

文字之所以会环绕含有 float 属性的图片是因为 float 破坏了正常的 line boxes。正常情况下，图片自身就是个 inline boxes，与两侧的文字 inline boxes 共同组成了 line boxes，但是，一旦图片加入了 float 属性，情况就完全变了。float 属性彻底破坏了图片的inline boxes 特性。一旦图片失去了 inline boxes 特性就无法与 inline boxes 的文字排在一行了，其会从 line boxes 上脱离出来，跟随自身的方位属性，靠边排列。

在目前的 CSS 的世界中，所有的高度都是由两个 CSS 模型产生的，一个是 box 盒状模型，对应 CSS为 "height+padding+margin" ，另外一个是 line box 模型，对应样式为”line-height”。前者的 height 属性分为明显的 height 值和隐藏的 height 值，所谓隐藏的 height 值是指图片的高度，一旦载入一张图片，其内在的 height 值就会起作用，即使您看不到”height”这个词。而后者针对于文字等这类  inline boxes的元素（图片也属于 inline boxes，但其 height 比 line-height 作用更凶猛，故其 inline boxes 高度等于其自身高度，对 line-height 无反应），inline boxes 的高度直接受 line-height 控制（改变line-height 文字拉开或重叠就是这个原因），而真正的高度表现则是由每行众多的 inline boxes 组成的line boxes（等于内部最高的 inline box 的高度），而这些 line boxes 的高度垂直堆叠形成了 containing box 的高度，也就是我们见到的 div 或是 p 标签之类的高度了。所以，对于 line box 模型的元素而言，没有 inline boxes，就没有高度了，而浮动却恰恰做了这么龌龊的事情，其直接将元素的 inline boxes 也破坏了，于是这些元素也就没有了高度。

float 破坏了图片的 inline box，产生了两个结果：一是图片无法与文字同行显示，脱离了其原来所在的 line box 链；二是没有了高度（无inline box -> 无line box -> 无高度）。而这些结果恰恰是文字环绕图片所必须的。

浮动元素与绝对定位元素的差别在于：绝对定位的元素脱离了文档流，而浮动元素依旧在文档流中；而这造成的显示上的差异就是：同处于文档流中的文字实体不会与浮动元素重叠，而会与绝对定位元素重叠。

float 将元素变成类似 inline box 的元素，又破坏了 inline box 的高度。

有什么证据可以证明“页面布局”不是浮动的“本职工作”呢。答案关键字就是：高度塌陷。

浮动本不是用来列表布局的，而是用来使元素环绕显示的，因为元素环绕（例如文字），其自身是含有 inline boxes 高度的，这是inline 水平的元素形成高度的基础，所以，虽然浮动元素没有高度，但是其周围环绕的元素是有高度的，只要环绕元素比浮动元素高度高，父标签无高度的问题自然也就没有了，但是纯粹一堆浮动元素会有高度吗？没有。所以浮动元素塌陷的问题根本就不是浏览器的 bug，而是我们没有正确地深入地了解浮动，是我们自己使用不当，因为浮动本不应该用在这里的。

清除浮动其实就一个目的，就是解决高度塌陷的问题。

1. 投机取巧法
就是直接一个<div style="clear:both;"></div>当作最后一个子标签放到父标签那儿，此方法屡试不爽，兼容性强，使用方便，是初学时使用的上佳之选。缺点是浪费了一个标签，而且只能使用一次，有时候一不留神中间多了个空格会产生一段空白高度的。

2. overflow + zoom 方法
.fix{overflow:hidden; zoom:1;}
此方法优点在于代码简洁，涵盖所有浏览器，可谓不错的选择啊。不过也是有问题的，就是这个 overflow:hidden; 是个小炸蛋，要是里面的元素要是想来个 margin 负值定位或是负的绝对定位，岂不是直接被裁掉了。

3. after + zoom方法
所谓after，就是指标签的最后一个子元素的后面。于是呢，我们可以用CSS代码生成一个具有clear属性的元素，其中的关键样式就是content了。或许您从网上看到的content里面的内容是”.”一个点，貌似随便写什么东西都没有问题。于是有：
.fix{zoom:1;}
.fix:after{display:block; content:'clear'; clear:both; line-height:0; visibility:hidden;}
这里的line-height:0写成height:0也是可以的。此方法可以说是综合起来最好的方法了，不会影响任何其他样式，通用性强，覆盖面广。

JavaScript可以改变CSS的属性，其他些属性还好，但是这个float值得一说，为何呢，因为float貌似是JavaScript中的一个关键字，不能使用obj.style.float="left";这样的句子。得使用其他写法。
IE浏览器：
obj.style.styleFloat = "left";
其他浏览器：
obj.style.cssFloat = "left";

详见： 

http://www.zhangxinxu.com/wordpress/?p=583 和 http://www.zhangxinxu.com/wordpress/?p=594