摘要：去年就看到张鑫旭大神的这篇文章，看了好几遍才看懂。而对于使用脱离文档流的元素，其他盒子与其他盒子内的文本都会无视它。而这造成的显示上的差异就是文档流中的文字实体不会与浮动元素重叠，而会与绝对定位元素重叠。
去年就看到张鑫旭大神的这篇文章，看了好几遍才看懂。后来再去想其中的一些原理，又忘了。于是打算把它记下来，一来做个备份，二来希望与君共勉。
这里我对文章以自己的理解做了一些精简，完整版的可以去http://www.zhangxinxu.com/wor...这里看
浮动的本质是：包裹性和破坏性包裹性：换种说法就是让元素inline-block化，例如一个div标签默认宽度是100%显示的，但是一旦设置了float，则100%默认宽度就会变成自适应内部元素的宽度。
其实float就是一个带有方向的display:inline-block属性破坏性：如果我们要理解浮动的破坏性，我们就要从浮动最原始的意义入手。浮动出现的意义其实只是用来让文字环绕图片而已，仅此而已。
浮动之所以会环绕含有float属性的图片是因为浮动破坏了正常的line boxes
我们先来了解一下line boxes模型。先看下面的一段普通的HTML代码：
代码中的4种boxes(顺序从里到外)：这是一行普通的文字，这里有个 em 标签。
inline boxes：

inline boxes不会让内容成块显示，而是排成一行，如果外部含inline属性的标签(span,a,cite等)，则属于inline boxes，如果是个光秃秃的文字，则属于匿名inline boxes
line boxes：
一个一个的inline boxes组成了line boxes.这是浮动影响布局的关键box类型
content area：
content area是一种围绕文字看不见的box.content area的大小与font-size大小相关
containing box：
为什么浮动能使文字环绕图片？p标签所在的containing box，此box包含了其他的boxes
默认情况下，图片与文字混排应该是这个样子：图片与文字基线对齐，图片与文字在同一行上，如下图所示：
含有浮动属性的图片与文字上图中，图片为一个inline boxes,两边文字也是inline boxes。由于line boxes的高度是由其内部最高的inline boxes的高度决定的，所以这里的line boxes的高度就是图片的高度
此时图片与文字是同一box类型的元素，是在同一行上的，所以，默认状态下，一张图片只能与一行文字对齐。而要想让一张图片要与多行文字对齐，您唯一能做的就是破坏正常的line boxes模型
先看一下图片添加了float:left样式后的表现，见下图：
正常情况下，图片自身就是个inline-boxes，与两侧的文字inline-boxes共同组成了line-boxes，但是一旦图片加入了浮动，情况就完全变了。浮动彻底破坏了图片的inline-boxes特性，至少有一点可以肯定，图片的inline-boxes不存在了
一旦图片失去了inline-boxes特性就无法与inline-boxes的文字排在一行了，就会从line-boxes上脱离出来，跟随自身的方向属性，靠边排列
这个从line boxes上脱离的浮动元素其实就是一个躯体，一个空壳子，表象。因为其没有inline boxes。有人可能会问，没有inline boxes就没有呗，有什么大不了的？非也非也！这个inline boxes很个很重要的概念
为什么inline-boxes很重要？文字环绕图片显示的原因在目前的CSS的世界中，所有的高度都是有两个CSS模型产生的，一个是盒子模型，对应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也破坏了，于是这些元素也就没有了高度
沿用上面图片的例子。浮动破坏了图片的inline box，产生了两个结果：一是图片无法与文字同行显示，脱离了其原来所在的line box链；二是没有了高度（无inline box -> 无line box -> 无高度）。而这些结果恰恰是文字环绕图片显示所必须的
这里有个动画，可以很好的帮助我们理解文字环绕图片显示的原因：http://image.zhangxinxu.com/f...
浮动(float) vs 绝对定位(absolute)动画所演示的关键点其实就是上面的一系列分析与讲解，即“包裹与破坏”！包裹是让标签占据的空间水平收缩，破坏是破坏的inline box。正如上面讲解的，inline boxes是高度形成的基础，浮动破坏了inline boxes也就没有高度可言了。正是由于浮动元素没有了inline boxes，没有了inline boxes高度，才能让其他inline boxes元素重新整合，环绕浮动元素排列
我们现在假设浮动没有破坏inline boxes，那么虽然图片会靠左显示，但是其会与文字形成新的高度包络线（同类聚合），且只能与一行文字形成line box，无法实现文字环绕效果，所以浮动破坏inline boxes是必须的
了解了浮动之后，我们来对比一下绝对定位
与浮动元素一样，绝对定位元素也具有"包裹性"和"破坏性"，并适用于任何元素，那么他们之间有什么区别呢？
观后感使用float脱离文档流时，其他盒子会无视这个元素，但其他盒子内的文本依然会为这个元素让出位置，环绕在周围。
而对于使用absolute脱离文档流的元素，其他盒子与其他盒子内的文本都会无视它。
而这造成的显示上的差异就是：文档流中的文字实体不会与浮动元素重叠，而会与绝对定位元素重叠。这就是文字环绕显示的重要原因之一：虽然图片实际占据的高度为0，但是由于其宽度实体存在（包裹性），同样是content area实体的文字不会与之重叠（外部的容器盒子containing box(p,div,ul,li)会重叠），这就好比篮球场上站了个植物人，虽然其几乎不可能得分，运球之类，但是他的实体在那里，它可以阻挡同一水平空间上的同一类型的个体（即人）直接穿过去，要通过，得绕道。但是其无法阻挡整个球队的向前推进
每次看这篇文章都有不同的感悟，张鑫旭大神对很多问题的理解非常深刻和独到，很欣赏他的文章。这篇文章中还有好几个知识点需要深入理解，比如css行高line-height的一些深入理解及应用，absolute的深入理解系列，我会找个时间整理一下，有兴趣的伙伴也可以去看下
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/111885.html
摘要：本文将讲述中最核心的几个概念，包括盒模型等。块级元素的默认为，而内联元素则是根据其自身的内容或子元素来决定其宽度。如果该元素的下一个兄弟元素中有内联元素通常是文字，则会围绕该元素显示，形成类似文字围绕图片的效果。 本文将讲述 CSS 中最核心的几个概念，包括：盒模型、position、float等。这些是 CSS 的基础，也是最常用的几个属性，它们之间看似独立却又相辅相成。为了掌握它们...
摘要：时其宽度始终保持占满宽度的态度。清除浮动就是为浮动影响的范围划边界。那么可归结为的父容器包裹所有子元素。注意属性值不能为空白，否则无法清除浮动。 前言 定位系统中第一难理解就是Normal flow，而第二就非Float莫属了，而Float难理解的原因有俩，1. 一开头我们就用错了；2. 它跟Normal flow靠得太近了。本文尝试理清Float的特性和行为特征，若有纰漏望各位指正...
摘要：父元素的顶端会限制浮动元素防止一直浮动到页面顶端。例子戳这里清除浮动清除浮动的目的是为了解决高度塌陷的问题撑开浮动父元素。原理会在元素的之上增加一个清除区域这个区域会在元素的上增加额外间隔并且不允许浮动元素进入这个区域。 浮动概念 浮动元素会脱离文档的普通流,根据float的值向左或向右移动,直到它的外边界碰到父元素的内边界或另一个浮动元素的外边界为止。由于浮动框不在文档的普通流中,所...
摘要：前段时间写过一篇基础知识之，当时对的理解不太准确，被慕课网多名读者指出原文已修正，如有误导实在抱歉。浮动的基础知识浮动有个属性左浮动右浮动不浮动继承。浮动元素脱离了标准文档流，文字和行级元素会环绕该元素，块级元素则不受影响。 前段时间写过一篇CSS基础知识之position，当时对float的理解不太准确，被慕课网多名读者指出（原文已修正，如有误导实在抱歉）。现对float进行更深入的...
摘要：浮动为什么会有文本环绕效果产生这个疑问主要来自于以往的印象浮动的元素是脱离文档流的。也就是说，浮动元素的确脱离了文档流，因此文档流中的块框会无视浮动的元素，但是文本不会。 作为前端写了很多页面布局，但是浮动这块一直是我似懂非懂的盲点，一方面用浮动能实现很多布局，另一方面浮动造成的影响又会破坏布局让人头疼，所以今天就特地写篇博文解决这块盲点。 本文主要讨论以下几个问题：1.浮动的原始用途...
阅读 2867·2021-11-18 10:02
阅读 3122·2021-11-02 14:48
阅读 3247·2019-08-30 13:52
阅读 383·2019-08-29 17:10
阅读 1937·2019-08-29 12:53
阅读 1270·2019-08-29 12:53
阅读 872·2019-08-29 12:25
阅读 2008·2019-08-29 12:17
