标准流
标准流：又称为 文档流，标签默认的排版规则
常见的标准流排版规则：
1：块级元素：从上往下，垂直布局，独占一行
2：行内元素 或行内块元素 ： 从左往右，水平布局 空间不够自动折行
浮动
可以让原本垂直布局的块元素变成水平布局
定位
1：可以让元素自由的摆放在网页的任意位置
2：一般用于盒子之间的层叠情况
浮动
浮动的作用：让垂直布局的盒子变成水平布局； 比如一个在左，一个在右
float:left;
left 左浮动
right 右浮动
特点[]
-1：浮动元素会脱离标准流.在标准流中不占位置
-2：浮动元素比标准流多半个级别，可以覆盖标准流中的元素
-3：浮动找浮动，下一个浮动元素会在上一个浮动元素后面左右浮动
-4：浮动元素有特殊的显示效果
一行可以显示多个
可以设置宽高
注意点：浮动的元素不能通过text-align:center或者margin:0 auto来居中;
清除浮动
子元素浮动了，此时子元素不能撑开标准流的块级父元素
方法：
1：直接设置父元素的高度
优点：简单方便
缺点:有些布局不能固定父元素高度
2：额外标签法
在父元素内的最后添加一个块级元素，给添加的块级元素设置clear:both
缺点:会在页面中添加额外的标签，会让页面html结构变得复杂
3：伪元素清除法【推荐使用】
用伪元素替代了额外标签
.clearfix::after{
content:'';
display:block;
clear:both;
height:0;
visibility:hidden;
}
优点：项目中使用，直接给标签加类即可清除浮动
4：给父元素设置overflow:hidden
优点：方便
定位
定位基本使用
1：设置定位方式：position:static;
static 默认 静态定位
relative 相对定位 *
absolute 绝对定位*
fixed 固定定位*
2：设置定位偏移值
选取的原则一般是就近原则(离那边近就用那个)
水平 left 数字+px 距离左边的距离
水平 right 数字+px 距离右边的距离
垂直 top 数字+px 距离上边的距离
垂直 bottom 数字+px 距离下边的距离
静态定位
静态定位是默认值，就是之前认识的标准流
注意：
1：静态定位是之前的标准流，不能通过方位属性进行移动
2：之后说的定位不包括静态定位，主要有：相对 绝对 固定
相对定位
相对于自己之前的位置进行移动
position:relative
特点:
1：改变位置参照自己原来的位置
2：仍然具有标签原有的显示模式特点
3: 占有原来的位置
绝对定位
相对于非静态定位的父元素进行定位移动
position:absolute
特点
1：脱离标准流，不占位置
2：改变标签的显示模式特点，具有行内块特点
先找已经定位的父级，如果有这样的父级就以这个父级为参照物
有父级，但父级没有定位，以浏览器窗口为参照物进行定位
使用：子绝父相
固定定位
相对于浏览器进行定位移动
position:fixed
特点
1：配合方向属性进行移动
2：相对于浏览器可视区域进行移动
3：脱离标准流 不占空间
4：具有行内块特点
