css 简析folat

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：
一、首先是p标签所在的containing box，此box包含了其余的boxes；

二、而后就是inline boxes，以下图标注，

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

三、line boxes，见下图的标注：

在containing boxes里，一个一个的inline boxes组成了line boxes。这是浮动影响布局的关键box类型，下面会详细阐述。

四、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显示截图）：