float脱离文档流及两个特性

文档流简介

文档流是文档中可显示对象在排列时所占用的位置。窃以为可以把窗口看作是高度为1px，宽度为显示器宽度的行组成（所以1366x768 px就是768行组成的），可显示的对象就像是word里面的文字，占满一行才会占用下一行的空间，当然对象的高度普遍大于1px，所以会同时占据多个最小行。

脱离文档流

绝对定位position：absolute;
固定定位position:fixed;
浮动float
都会脱离文档流，但float比较难理解，所以我们重点说float,请看一下代码和运行效果：

  

    
float脱离
float
    
看，单以文字来说，float并未脱离文档流，但是box1块级元素的位置又是说明其脱离了文档流
  

下面是运行结果，你们也可复制了代码去自行测试：

运行结果

所以这里我们把文字会认为float元素未脱离文档流当作是float的特性一；但其实它是脱离了文档流的，可以看见它也不能把父元素撑开

第二段代码，知识修改了$(".box")与$(".box1")的上下位置，却发现不同的效果：

  

    
看，单以文字来说，float并未脱离文档流，但是box1块级元素的位置又是说明其脱离了文档流
    
float脱离
float
//这个div之前在$(".box1")的上方
  

下面是运行结果，你们也可复制了代码去自行测试：

运行结果

这里可以看到float的第二个特性，对于非文字对象,它相当于positon:absolute;left:0;(或则是right:0;)，且默认其父元素设置了position:relative;&&默认对在其之上的兄弟元素设置了float。
也就是说它脱离了文档流，但是还是在其父容器中，而position:absolute;在不为父容器设置position的情况下，是相对于window对象进行偏移的。

注意：以上两个特性是自己闲来时总结的，并无官方文档支持，有不对的地方请大家指正，谢谢。