流动方向

先给一张图，观察文档的流动方向:

通过上图，我们可以知道文档的流动方向:
inline元素从左到右，到达最右边才会换行
block元素从上到下，每一个都另起一行
inline-block也是从左到右

比较常见的block元素是div,inline元素常见的有span，我们通过代码来看对比: 将inline元素转换成block元素:display:block
将block元素转换成inline元素:display:inline
注意:不要在inline元素里加block元素

inline和inline-block的区别

先看图
可以直观地看出:inline-block元素到最右边不会像inline元素一样会折行显示文字内容，而是类似块级元素，一整块地显示。所以说inline-block有着inline元素的从左到右的流动方向，也有着block元素的块级显示。

文档流宽度

inline元素宽度为内部inline元素的和，设置width无效
block默认自动计算宽度，可用width指定
inline-block结合两者特点，可用width

文档流高度

inline高度由line-height间接决定，与height无关
block元素高度由内部文档流元素决定，可以设置height
inline-block跟block类似，可以设置height

脱离文档流

哪些操作会脱离文档流?
1. float 2. position:absolute/fixed 把元素设置为浮动后，会脱离文档流，最终导致父元素高度塌陷 要想高度不塌陷，清除浮动就好了

position:absolute也会脱离文档流,先看未加定位的图: 再看加了定位的图 通过上图得知:加了position:absolute后,div1会脱离文档流(可以理解为浮起来了)，原来占据的位置被div2顶上来了