默认文档流就是对页面布局不加任何修饰，元素自动的布局方式，其特点如下
1)元素在页面中的显示顺序与元素在代码中出现的顺序是一致的，即文档结构从外到内、从上到下、从左至右。
2)块级元素独占一行空间，宽度默认为父级的100%，高度由其内容高度（子元素高度）所决定。
3)行内元素与其他元素共享一行空间，宽高由其内容所决定。
同级别的块级元素：垂直方向的线性结构；
同级别的行内元素：水平方向的线性结构。
布局方式：浮动布局、定位布局、伸缩盒布局/弹性盒
1.浮动布局（float）
浮动布局的主要是为了让块级元素在一行中显示（列级布局），或者让文字在
图片的周围显示。其取值有：
left:向左浮动元素
right:向右浮动元素
none:【默认值】，不浮动
inherit:浮动方式继承父元素
若给父元素一个高度，则不会失去高度，不用清除浮动；
若父元素本身没有高度，子元素浮动之后会脱离文档流，不能支撑起父元素，所以父元素就会失去高度，此时若需要清除浮动，则在父元素中给一个 overflow:hidden的命令，或者在最后一个浮动子元素后面加上一个<div class=”clearboth”>，在css中给这个块元素一个 clear:both的命令。
2.定位布局(position)
静态定位：默认定位方式，即处于默认文档流中（static）
相对定位：position:relative;不脱离文档流，仍保留原先位置，有left/right/top/bottom属性，相对定位的参照物是自己原先的位置。
绝对定位：position:absolute;脱离文档流，不再占据空间，显示在其他元素的上方。没有定位父元素的，相对于视口区的左上角定位；有定位父元素（一般是position:relative）的，相对于定位祖先元素进行定位。
固定定位：position:fixed;固定定位元素相对于浏览器视口区进行定位，脱离文档流，原先位置不保留，没有设置定位属性的情况下，默认是在原先位置固定定位，不会随着浏览器的滚动而滚动
粘性定位：position:sticky;不脱离文档流，仍然保留元素原本在文档流中的位置。当元素在容器中被滚动超过指定的偏移值时，元素在容器内固定在指定位置。
使用条件：①父元素不能有overflow:hidden;或者overflow:auto属性；②必须指定top/right/left/bottom属性中的一个，否则只是处于相对定位；③父元素的高度不能低于sticky的高度；④sticky元素仅在其父元素内生效。
层叠顺序：当两个定位元素叠加在一起的时候，可以使用“z-index”来改变两个定位元素出现的顺
序（ z-index 取值无需指定单位，值大的显示在上方。 ）
3.伸缩盒布局（flex）
(CSS3 特有)弹性盒（ Flexible Box 或 flexbox），是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。
对其父元素，在css中设置 display:flex; 此时这个盒子就会变成一个弹性盒子。
弹性盒子分主轴和交叉轴，默认x轴为主轴，y轴为交叉轴，但是可用flex-directioon属性改变。
flex-direction:row;（列布局，行排列）即x轴为主轴，y轴为交叉轴；
flex-direction:column;（行布局，列排列）即y轴为主轴，x为交叉轴
其中，在主轴上的排列方式justify-content:
justify-content:flex-start 【默认值】在主轴的开始显示
justify-content:flex-end 在主轴的结束显示
justify-content:center 在主轴的中心显示
justify-content:space-around 填充空白自适应在主轴中心显示
justify-content:space-between 填充空白自适应在主轴中心显示，但是首尾两个元素距离容器没有空白
在交叉轴中的对齐方式align-items:
align-items:flex-start 在伸缩盒子容器的伸缩开始位置显示，即伸缩盒子容器顶部
align-items:flex-end 在伸缩盒子容器的伸缩结束位置显示，即伸缩盒子容器底部
align-items:stretch 【默认值】将盒子在交叉轴上进行拉伸，直至适应整个伸缩盒子容器
align-items:center 盒子在交叉轴中心显示
align-items:baseline 基线对齐，即文本对齐
多轴排列在交叉轴对齐方式align-content:
即多条主轴在交叉轴上的排列方式，一般用于有换行且两条主轴有间隔的情况。
取值有：flex-start flex-end center stretch【默认】 space-around space-between
