我们一般说的css文档流指的是普通文档流 Normal Flow,和css布局相关：
普通文档流就是：即元素排版布局过程中，元素会自动从左往右，从上往下的流式排列。
并最终窗体自上而下分成一行行，并在每行中从左至右的顺序排放元素。
而普通文档流中的元素 分为块（Block）元素和内联（inline）元素
一 、 块级元素：
1.常见块标签 div、p（段落文本）、 h1-h6（标题）、ul（无序列表）、li、dl（自定义列表）、dt、dd...
2.块元素 兄弟级关系 从上往下每个占据一行。
3.块元素的width的默认值与父元素的width相同
4.块元素的height的默认由子元素的狂模型的高度决定
二、 内联元素（也叫行业元素）：
1.常见内联标签 a（超链接）、span（空标签）、strong（加粗）、u（下划线）、em（斜体）
2.多个内联元素在处于文档流时，从左到右依次排开，一行不足以容纳则会换行；
3.内联元素不能设置width和height，内容区大小由内容大小决定。
内联标签使用 display 属性值为block ,就成了块元素
同样块元素使用 display属性值为inline,就成了内联元素
三内联块元素
还有一种内联块元素常见的标签有 img 、input、textarea ....是内联元素但是可以是设置宽高
相当于 display的属性值为 inline-block
css以下的属性可能会修改元素的文档流
1.display（显示）
值：inline设置为内联元素，block设为块元素，inline-block设为内联块元素，
flex设置为弹性盒子布局，
gird设置为网格布局，
table设置为表格布局，
这些值不会让元素脱离文档流
值：none会脱离文档流,
不占据页面空间; visibility:hidden,只是隐藏内容,并没有脱离文档流,会占据页面的空间。
2.multi-column(多列)
column-count :指定元素应该分为的列数，这个设置也不会让元素脱离文档流
3.float （浮动）
值为：left把元素移动到左侧，并且使元素脱离文档流
值为：right把元素移动到右侧，并且使元素脱离文档流
4.position（定位）
针对单个元素设置定位，默认为staic,不脱离文档流
值为：relative 相对定位 按照最近的父级容器 按照top 和 left等属性值进行偏移，不脱离文档流
值为：absolute 绝对定位 按照最近的非static的父级容器 按照top 和 left等属性值进行偏移，脱离文档流
值为：fixed 固定定位 基于浏览器的可视区域 按照top 和 left ，bottom ,right 的属性值进行偏移，永久保持在那个位置,脱离文档流
值为：sticky 粘性定位，relative定位滚动导航会切换为fixed定位，切换后就脱离文档流了
脱离文档流 相当于该元素被新建了一个图层在来存放，原文档流元素定位的时候当该元素不存在。
所以
1.一个块元素脱离了文档流，那么兄弟元素会上移占据该元素原来在文档流中的位置
2.多个脱离文档流的块元素可以在一行显示
3.脱离文档流的块元素可能内容撑开，因为他的宽度不再是父级元素的宽度
4.脱离了文档流的内联元素，可以设置宽高
使用float脱离文档流时，其他盒子会无视这个元素，但其他盒子内的文本依然会为这个元素让出位置，环绕在周围。而对于使用position脱离文档流的元素，其他盒子与其他盒子内的文本都会无视它。