CSS之文档流Normal Flow
文档流方向
主要分为横向和纵向之分，如图：
文档流
- 流动方向
- inline元素从左到右，超出宽度换行
- block元素从上到下，每一个换一行
- inline-block元素从左到右
- 宽度
- inline 宽度为内部 inline 元素的和，不能用 width 指定
- block 默认自动计算宽度，可用 width 指定
- inline-block 结合前两者特点，可用 width
- 高度
- inline 高度由 line-height 间接确定，跟 height 无关
- block 高度由内部文档流元素决定，可以设 height
- inline-block 跟 block 类似，可以设置 height
溢出
当内容大于容器的时候
- 等内容的宽度或高度大于容器的，会溢出
- 可用 overflow 来设置是否显示滚动条
- auto 是灵活设置
- scroll 是永远显示
- hidden 是直接隐藏溢出部分
- visible 是直接显示溢出部分
- overflow 可以分为 overflow-x 和overflow-y
怎么脱离文档流
- 脱离文档流元素
- float
- position: absolute / fixed
- 不脱离文档流方法：不用上面元素就不会脱离