一、文档流
在我们生活中，有各种各样的“流”，有电流、水流等，就像水流从高处往低处流一样，我们可以把文档流想象成html元素在浏览器上“流动”。浏览器的顶端就是河流的源头，浏览器的底部就是河流的尽头。 如下图
而所谓的文档流（normal flow，也被称为“普通流”），指的是就是元素排版布局过程中，元素会自动从上往下，从左往右地遵守这种流式排列方式。
当浏览器渲染HTML文档时，从顶部开始渲染，为每个元素分配所需要的空间，遇到块级元素则放置在一行，行内元素则被水平放置直到在当前行遇到边界，然后从下一行起点继续渲染。
从这里就引出了两个不同的概念：块级元素和行内元素（内联元素）。那么什么是块级元素和行内元素？
可以看另一片文章CSS中的块级元素、行内元素和行内块元素
二、脱离文档流
脱离文档流说的是将元素从普通文档流中脱离出来，而其他没脱离的元素会当其不存在，仍按照给定的位置进行定位，也可以与脱离文档流元素重叠。
那么，引起元素脱离文档流的情况有哪些呢？
1、float浮动
设置浮动float可使元素脱离文档流，其他盒子会无视这个元素，但其他盒子内的文本依然会为这个元素让出位置，环绕在该元素的周围。 所以很多时候可以用来实现文本环绕效果。
CSS：
.demo1{
width: 200px;
height: 200px;
border: 1px solid red;
float: left;
}
.demo2{
width: 200px;
height: 100px;
border: 5px solid green;
}HTML：
<div class="demo1">demo1</div>
<div class="demo2">demo2终于知道爱都有翅膀，怎么拥抱他总要飞翔</div>效果：
2、position：absolute绝对定位
绝对定位元素完全脱离文档流，它相对于最近的非 static（relative/absolute/fixed） 祖先元素定位。当这样的祖先元素不存在时，则相对于ICB（inital container block, 初始包含块）。而根元素所在的包含块就叫初始包含块（ICB），所以也就是说当绝对定位的元素没有非 static定位属性的父元素时，相对于ICB定位。根元素的包含块一般是视口（连续媒体）或者由页面区域（paged media）。
3、position：fixed固定定位
固定定位相对于可视窗口（浏览器窗口）进行定位，它完全脱离文档流，即使页面滚动条滚动都无法改变它的位置。
