本文共 3259 字，大约阅读时间需要 10 分钟。

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

2. 浮动的包裹性

撇开浮动的“破坏性”，浮动就是个带有方位的display:inline-block属性

display:inline-block某种意义上的作用就是包裹(wrap)，而浮动也有类似的效果。举个常见例子，或许您有实现宽度自适应按钮的经验，实现宽度自适应的关键就是要让按钮的大小自适应于文字的个数，这就需要按钮要自动包裹在文字的外面。我们用什么方法实现呢？一就是display:inline-block；二就是float

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

3. 浮动的破坏性

文字之所以会环绕含有float属性的图片是因为浮动破坏了正常的line boxes

HTML:<p>这是一行普通的文字，这里有个 <em>em</em> 标签</p>

这段HTML代码涉及到4种boxes：

1. 首先是p标签所在的containing box，此box包含了其他的所有boxes

2. 然后就是inline boxes

inline boxes不会让内容成块显示，而是排成一行，如果外部包含inline属性的标签(span,a,cite等)，则属于inline boxes，如果是个光秃秃的文字，则属于匿名inline boxes

3. line boxes

在containing boxes里，一个一个的inline boxes组成了line boxes。这是浮动影响布局的关键box类型

4. content area

content area 是一种围绕文字看不见的box。content area的大小与font-size大小相关

5. 正常的图文混排

默认情况下，图片与文字混排应该是这个样子：图片与文字基线对齐，图片与文字在同一行上

上图中，图片为一个inline boxes，两边的文字也是inline boxes。由于line boxes的高度是由其内部最高的inline boxes的高度决定的，所以这里line boxes的高度就是图片的高度。此时图片与文字是同一box类型的元素（都是inline boxes），是在同一行上的，所以，默认状态下，一张图片只能与一行文字对齐。而要想让一张图片要与多行文字对齐，您唯一能做的就是破坏正常的line boxes模型

6. 含有浮动属性的图片与文字

刚才说过，正常情况下，图片自身就是个inline boxes，与两侧的文字inline boxes共同组成了line boxes，但是，一旦图片加入了浮动，情况就完全变了。我认为是浮动彻底破坏了img图片的inline boxes特性，至少有一点我可以肯定，图片的inline boxes不存在了，被恶魔附体，变身了，而这个恶魔就是浮动。一旦图片失去了inline boxes特性就无法与inline boxes的文字排在一行了，其会从line boxes上脱离出来，跟随自身的方位属性，靠边排列。这种状态跟限制性内切酶起作用几乎一致，一条基因链上(line boxes)有很多的基因(inline boxes)，然后限制性内切酶(float)会切除特定的DNA序列，此序列(float元素)就会从基因链上脱离出来

在目前的CSS的世界中，所有的高度都是有两个CSS模型产生的，一个是box盒状模型，对应CSS为”height+padding+margin”，另外一个是line box模型，对应CSS为”line-height”。前者的height属性分为明显的height值和隐藏的height值，所谓隐藏的height值是指图片的高度，一旦载入一张图片，其内在的height值就会起作用，即使您看不到”height”这个词。而后者line box则针对于文字等这类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也破坏了，于是这些元素也就没有了高度

我们所需要的布局也就那么几个，其中之一就是文字环绕图片显示了，可是怎么实现这样的效果呢？聪明的CSS开发者就创造了一个修炼“魔功”的float属性，其作用就是破坏line boxes模型好让文字环绕图片显示，最后实现了吗？确实实现了。还记得我多次说到的浮动的意义吗——只是用来让文字环绕图片而已，而要实现这个就需要用到浮动的“破坏性”

沿用上面图片的例子。浮动破坏了图片的inline box，产生了两个结果：一是图片无法与文字同行显示，脱离了其原来所在的line box链；二是没有了高度（无inline box -> 无line box -> 无高度）

我们可以拿浮动元素与绝对定位元素做对比或许可以帮助理解。与浮动元素一样，绝对定位元素也具有“包裹性”，此“包裹性”适用于任何元素。那么，浮动元素与绝对定位元素的差别在哪里呢？我觉得最主要的差别在于：绝对定位的元素脱离了文档流，而浮动元素依旧在文档流中；而这造成的显示上的差异就是：同处于文档流中的文字实体不会与浮动元素重叠，而会与绝对定位元素重叠。这就是文字环绕显示的重要原因之一：虽然图片实际占据的高度为0，但是由于其宽度实体存在（包裹性），同样是content area 实体的文字不会与之重叠（外部的容器盒子containing box(p,div,ul,li)会重叠），这就好比篮球场上站了个植物人，虽然其几乎不可能得分，运球之类，但是他的实体在那里，它可以阻挡同一水平空间上的同一类型的个体（即人）直接穿过去，要通过，得绕道。但是其无法阻挡整个球队的向前推进。见下图（firebug显示截图）

总结：

1. 浮动元素的破坏性虽然破坏了inline boxes，但其内容还是真实存在的(图片占据的高度为0，但是因为包裹性的原因其实体还是存在)，所以和绝对定位元素不同的就是被破坏掉的元素并没有脱离文档流，仍然会占据一定的空间

2. 浮动元素的包裹性是指浮动元素实际就是一个block元素，或者带方向的inline-block属性，那么等同于是根据内容来决定宽度或者高度的意思

3. 浮动元素的破坏性是指破坏了inline boxes导致的

4. CSS中的高度由2个模型产生，一个是盒模型的margin+padding+content，另一个则是专门用来衡量文字的line boxes，文字的高度一般由line-height属性决定