css 简析folat_html/css_WEB-ITnose

1.float??

不知道大家是否还记得之前我们讲过页面是文档流，具体什么是文档流，我就不说了？于是我们页面布局如果用div的话，那么块状的元素是怎么排列的，什么叫块状自己去看?

如果我们呢用div布局的话，可能会遇到一个问题?

大家见没有。如果我想把xxxxx放到和Box-1排在一起，我应该怎么搞啊?可能你会说前面我们已经说了用定位可以解决，但是今天我们讲的是用float,来实现大家来看看我们如果加上float是不是就实现了?

真可以啊?开心完全满足了我们的要求。其实我们在实际里面也经常使用float来横向排版、或者多列布局。其实这个里面有一个问题?不知道大家注意没有，其实使用浮动元素脱离了常规文档流之后，注意：其实是原来紧跟其后的元素就会在空间允许的情况下，向上提升到与浮动元素平齐平座。

如果你看过W3标准的话，你可能发现这个怎么和实际不太一样（我们指使用场景上面）

float 属性定义元素在哪个方向浮动。以往这个属性总应用于图像，使文本围绕在图像周围，不过在 CSS 中，任何元素都可以浮动。浮动元素会生成一个块级框，而不论它本身是何种元素。m ,

既然说到文字环绕的话，我们用一句形象的话他是如何实现的。你在浮动一张图片或者其他元素时，你是在要求浏览器把它往上方推，直到他碰到父元素的内边界。后面的段落不再认为浮动元素在文档流中位置于他的前面了。因而他会占据父元素左上角的位置。文字环绕开。

那么float 有哪些特性了?

包裹性.破坏性

什么是包裹性?

如果我添加了folat:又会变成什么样子了?

大家能不能够看到明显的区别啊。这个盒子的区别是什么啊?其实这个时候：如果给div增加float:left之后，它突然变得紧凑了，宽度发生了变化，把内容“王福朋”三个字包裹了——这就是包裹性。div设置了float之后，其宽度会自动调整为包裹住内容宽度，而不是撑满整个父容器 注意，此时div虽然体现了包裹性，但是它的display样式是没有变化的，还是block。display:inline-block 与float的区别是什么？float无法等同于display:inline-block，其中原因之一就是浮动的方向性，display:inline-block仅仅一个水平排列方向，就是从左往右，而float可以从右往左排列，这就是两者的差异。然而，我们又有多少情况需要元素从右往左排列呢？很少，所以，CSS中，没有浮动这一属性不是什么大不了的事情，它其实就那么回事。

破坏性：（这个是照抄地址http://www.zhangxinxu.com/wordpress/2010/01/css-float%E6%B5%AE%E5%8A%A8%E7%9A%84%E6%B7%B1%E5%85%A5%E7%A0%94%E7%A9%B6%E3%80%81%E8%AF%A6%E8%A7%A3%E5%8F%8A%E6%8B%93%E5%B1%95%E4%B8%80/）感觉比我讲的好就借鉴了

2. 浮动的“破坏性”
浮动可以说是所有CSS属性中的“破坏之王”。要理解浮动的破坏性，我们要从浮动最原始的意义入手。我在上面把浮动的原始意义用粗斜体表示出来了，就是“只是用来让文字环绕图片而已，仅此而已。”

所以，只要您弄明白了为什么文字会环绕含浮动属性的图片，您就会知道我所说的浮动的“破坏性”是什么意思了。//下面这部分内容是本文核心，多个人观点，我尽量表述清楚。您若有兴趣，可以放慢在这里的阅读速度。

先说结论：文字之所以会环绕含有float属性的图片时因为浮动破坏了正常的line boxes。

这里有必要先讲讲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大小相关。

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

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

含有浮动属性的图片与文字
先看一下图片添加了float:left样式后的表现，见下图：

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

这个从line boxes上脱离的浮动元素其实就是一个躯体，一个空壳子，表象。因为其没有inline boxes。有人可能会问，没有inline boxes就没有呗，有什么大不了的？非也非也！这个inline boxes很个很重要的概念。我曾在“css行高line-height的一些深入理解及应用”一文中提到过高度的本质，这里有必要再讲一遍。

在目前的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也破坏了，于是这些元素也就没有了高度。

我们所处的这个世界时需要坏人来维持平衡的。武侠世界里不是常有要消灭某个超牛叉的大魔头时，会有人修炼魔功与之抗衡嘛。浮动似乎就是这样的一个角色，在网页最初的时候就是显示一些图片的文字啊什么的，所需要的布局也就那么几个，其中之一就是文字环绕图片显示了，可是怎么实现这样的效果呢？聪明的CSS开发者就创造了一个修炼“魔功”的float属性，其作用就是破坏line boxes模型好让文字环绕图片显示，最后实现了吗？确实实现了。还记得我多次说到的浮动的意义吗——只是用来让文字环绕图片而已，而要实现这个就需要用到浮动的“破坏性”。

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

文字环绕图片显示的原因
先看下面的flash动画演示（点击按钮开始）：

动画所演示的关键点其实就是上面的一系列分析与讲解，即“包裹与破坏”！包裹是让标签占据的空间水平收缩，破坏是破坏的inline box。正如上面讲解的，inline boxes是高度形成的基础，浮动破坏了inline boxes也就没有高度可言了。真是由于浮动元素没有了inline boxes，没有了inline boxes高度，才能让其他inline boxes元素重新整合，环绕浮动元素排列。

我们现在假设浮动没有破坏inline boxes，那么虽然图片会靠左显示，但是其会与文字形成新的高度包络线（同类聚合），且只能与一行文字形成line box，无法实现文字环绕效果，所以浮动破坏inline boxes是必须的。

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