文档流是文档中可显示对象在排列时所占用的位置或者空间，比如：
- 块元素自上而下，<h1><p>
- 内联元素从左到右<span>
遵循元素默认的摆放方式，也被称为“标准流”。
在标准流中布局有很多限制：
- 高低不齐的元素，默认是底边对齐；<span><img>
- 空白折叠现象：
- 无论输入多少空格、换行、tab，都会折叠为一个空格；
- 对于连续多张图像，<img>标签，代码必须在一行才没有空隙。若换行，两个图像将会有一定的空隙，也被称为幽灵行。
解决办法：脱离文档流
就是脱离元素本身的布局方式，或者脱离标准文档流，主要有三种方式：
- 浮动
- 绝对定位
- 固定定位
浮动：增加一个浮层来放置内容
float的定义：
float 属性定义元素向左或者向右浮动，任何元素都可以浮动
语法：float：left | right
浮动的原理
- 浮动使元素脱离文档流；
- 浮动只能左右浮动，不能上下浮动。
元素向左浮动
脱离文档流之后，元素相当于在页面上增加了一个浮层来放置内容。
可以理解为此时有两层页面，一个是原页面内容在底层，另一个是脱离文档流的在上层，页面上会出现重叠现象。
