脱离文档流之 float 和 position:absolute的区别

• 下面一篇文章很详细的讲解了浮动和定位脱离文档流的方式http://www.tuicool.com/articles/IBJvyy7
  

所谓的文档流，指的是元素排版布局过程中，元素会自动从左往右，从上往下的流式排列。并最终窗体自上而下分成一行行, 并在每行中按从左至右的顺序排放元素。脱离文档流即是元素打乱了这个排列，或是从排版中拿走。脱离文档流的元素有个标志：没有实际高度。 脱离文档流的元素都是块级元素。

A.定位position

结论：

1.static定位不脱离文档流，设置left/top/right/bottom没有作用（别人也不能相对他进行top/left/right/bottom定位），对margin/padding敏感。

【证据：#bigest定位left没有其作用】可以点击链接看文章中的例子

2.父子节点都是没有脱离文档的两种定位（static、relative）的外边距（margin）会合并（垂直外边距合并） ，显示效果以最大的那个外边距为准。

2.1: 当然，这是在没有内边距影响的情况下。如果有内边距影响，那么子元素的外边距会基于父元素的内边距来偏移。如我们设置#big{ padding-top:  10px;}属性后，#nomal的margin-top是在#big的padding-top开始偏移的.

2.2: 块级元素的垂直相邻外边距会合并，而行内元素实际上不占上下外边距。行内元素的的左右外边距不会合并。同样地，浮动元素的外边距也不会合并。允许指定负的外边距值，不过使用时要小心。可见行内元素对定位top/right/bottom/left、宽高width/height、外边距margin不敏感，对边框border和内边距padding敏感。

  

块级元素，块级行内元素

行内元素

浮动之后

padding 内边距 留白

有

有

有

border 边框

有

有

有

margin外边距 

有

无（如果设为float或者absolute就当做块级行内元素处理，所以可以有）

有

margin外边距是否会合并（选取最大外边距）

是

否，因为无margin（对其不敏感）

否，

宽高

有

无（如果设为float或者absolute就当做块级行内元素处理，所以可以有）

有

2.3：还有一点：脱离文档流的元素都是块级元素。

2.4： 在使用脱离文档流的定位的时候最好使用 "left", "top", "right" 以及 "bottom" 属性对元素的位置进行规定。否则可能出现不良情况

设置了top，top相对于body元素定位，可以预期。

3.absolute生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。static是定位的默认值

因为static定位是无法使用left/top/right/bottom设置位置的，static定位的元素应当和他们的父节点的边重合（在不考虑其他因素的情况下，比如外边距margin）。

第一种，元素的某条边 没有 设置定位属性（left/top/right/bottom）的时候(默认值为auto)，这一边就会将absolute块（包括外边距）按流式布局来排列（如实验1结果所示），当然这个流式布局就会受到内边距padding的影响了。

第二种，元素的某条边 设置了 定位属性（left/top/right/bottom）的时候(默认值是auto)，这一边就会被作为脱离文档流的边来处理，会相对于 static 定位以外的第一个父元素（的边框）进行定位，如果这时候设置了外边距，那么这一边相对于基准元素的偏移=定位值（left/top/right/bottom）+ 外边距。效果如实验2所示。作为脱离文档流来处理的边是基于那个基准元素的边框来定位的，当然不受内边距padding的影响。

4.fix定位可以看成一种特殊的绝对定位，absolute的基准元素是 static 定位以外的第一个父元素，而fix的基准元素是浏览器窗口。absolute定位结果分两种情况对于fix来说同样适用。

5.因为absolute相对于 static 定位以外的第一个父元素进行定位,所以一般要对某个元素absolute定位，则设置其父元素为relative即可。避免无法预知的基准元素。

6.强烈建议脱离文档流的定位absolute的元素不要在其内部包含有脱离文档流(fixed,absolute)的元素存在。

举一个例子，某个iframe中内容会不断增高或缩小，但是iframe不能有自己的滚动条，需要同步增高或减少父窗口和iframe的高度使得滚动父窗口滚动条滚动显示iframe的内容。这个时候，需要计算iframe中body内容真实的高度（这个高度不能使用$(document).height()来获得，看这篇文章最后总结中document总结的IE部分 ，获取的不一定是body内容的真实高度），对于脱离文档流的元素需要自己计算高度，而脱离文档流的元素a中还包含脱离a的元素b，咋搞哦。所以才有这里的建议。

7. 对使用absolute脱离文档流的的元素如果做到让absolute元素后面的元素自适应布局？一般使用margin定位后面的元素来处理。

<style>#panel {  width: 500px;  height: 100px;  border: green solid 1px;}#left {   position:absolute;  height: 100px;  width: 100px;  background: #000;  opacity: 0.5;  color: #fff;}#right {  margin-left: 110px;  background: #ff0;}</style><div id="panel">  <div id="left">这个东东是position：absolute</div>  <div id="right">这个东东是position：absolute后面的元素这个东东是position：absolute后面的元素</div></div>

#left绝对定位宽度是100，那么只要使#right margin-left: 110px; 这样空出#left的显示空间即可。#right的自适应照常使用。

8. relative没有脱离文档流。

如果原来不明白为什么，就有必要看这个例子。relative：相对定位，参造物是其本身，并不脱离文档流，不管你怎么移动，它原有的位置还是会留着。不仅如此，脱离文档流的元素相当于自身生成了一个新的文档流，父容器对其没有布局上的影响（最多是定位的影响）。但是relative却不是，父容器对其布局影响照旧。

relative在堆叠优先级上和fixed、absolute一样，要比兄弟节点中static节点要高 。

  

B.float

float 属性定义元素在哪个方向浮动。以往这个属性总应用于图像，使 文本围绕 在图像周围，不过在 CSS 中，任何元素都可以浮动。浮动元素会生成一个块级框，而不论它本身是何种元素。文字之所以会环绕含有float属性的图片时因为浮动破坏了正常的line boxes。以下对于lines boxes理解，参考http://www.zhangxinxu.com/wordpress/?p=583
在目前的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也破坏了，于是这些元素也就没有了高度。

1. 如果浮动非替换元素（这些是替换元素<img>、<input>、<textarea>、<select>、<object>），则要指定一个明确的宽度；否则，它们会尽可能地窄。
2. 如果一个元素的所有子元素都是浮动的，那么这个元素高度就是0（若没有指的宽度，就是父元素宽度）。（脱离文档流的元素有个标志：没有实际高度） 如果想要父元素内的浮动元素占有原来的高度，在 父元素内部最后一个元素加上css属性为clear：both的块状元素即可，或者给父元素设置overflow:hidden;或者利用clearfix，浮动带来的一些问题，详细请看另一篇笔记http://blog.csdn.net/qq_21184771/article/details/56335747
   
3. 对于浮动属性来说， 位置属性（left/top/right/bottom）是没有用的。
4. 浮动有点像玩俄罗斯方块。向左浮动，方块从右往左滑过来，如果 某一行空间不够（基于父容器的宽度） ，那么这个块会沿着最右边的块的下边沿水平划过来，最后看卡到哪里就停止。可看链接里的例子

#left4在第一行left3后面宽度不够，换行成第二行。在left2后面宽度不够，只能在left1后面。

#right1自然是从第二行开始查找位置，很幸运第二行现在唯一的元素#left4右面空间足够，放置即可。

#right2在第二行中没有足够的位置，换行成第三行，找到空余位置插入。

• 下文基于https://segmentfault.com/a/1190000007357865

float 是 css 的定位属性。在传统的印刷布局中，文本可以按照需要围绕图片。一般把这种方式称为“文本环绕”。在网页设计中，应用了CSS的float属性的页面元素就像在印刷布局里面的被文字包围的图片一样。浮动的元素仍然是网页流的一部分。这与使用绝对 定位的页面元素相比是一个明显的不同。绝对定位的页面元素被从网页流里面移除了，就像印刷布局里面的文本框被设置为无视页面环绕一样。绝对定位的元素不会 影响其它元素，其它元素也不会影响它，无论它是否和其它元素挨着。

  Float对小型的布局同样有用。例如页面中的这个小区域。如果我们在我们的小头像图片上使用Float，当调整图片大小的时候，盒子里面的文字也将自动调整位置，而absolute却不能。

float父元素塌陷问题 http://www.cnblogs.com/hnyei/archive/2011/09/27/2193133.html

float 是半脱离，在文档流中会占有一定位置， 使用float脱离文档流时，其他盒子会无视这个元素，但其他盒子内的文本依然会为这个元素让出位置，环绕在周围。

加了浮动以后，元素占有的实际高度变成0，所以才能并排显示。没有设置top,浏览器会将 脱离文档流的块（包括外边距） 按流式布局排列 ，给人感觉貌似没有脱离文档流，但是两个块之间的空白有60px高度，这种情况非我们预期。

.firstdiv{    background-color:rgba(125,125,235,0.4);    height:200px;    width: 200px;    float: left;  }  .seconddiv{    background-color: #faf;    height:300px;    width: 300px;    border:1px solid red;  }  <div class="firstdiv">     这是第一个DIV  </div>  <div class="seconddiv">     这是第二个DIV  </div>

根据chrome调试和红色边框，可以看到第二个div的背景和边框是占据了第一个DIV的空间的，但是第二个div的文本仍然为第一个DIV留出了位置。

position：absolute  是完全脱离， 对于使用absolute position脱离文档流的元素，其他盒子与其他盒子内的文本都会无视它。

定位的话个人觉得相对定位是基于正常文档流的，绝对的话就脱离文档流

例如：将上例中float：left改为position: absolute。可以看到，第二个div的文字亦被第一个div的文字给覆盖了