# 非脱标准流
# 相对定位
# 定义：相对于自己以前在标准流中的位置来移动
# 特点
- 相对定位不脱离标准流，会继续在标准流中占用一份空间
- 相对定位中，区分块级/行内/行内块级元素的
- 相对定位元素设置内外边距等属性时，会影响到标准流的布局
# 场景
- 用于对元素进行微调
- 子绝父相
# 注意
相对定位的top、bottom无效时，需要父元素显式地声明高度。
# 脱标准流
- 脱离标准流元素，不占用标准流中的空间
- 脱离了标准流元素，不区分行内/块级/行内块级元素
# 绝对定位
# 定义：相对于body来定位
# 注意
- 如果一个绝对定位的元素没有定位流的祖先元素,以body作为参考点，即首屏的宽高(跟随浏览器的大小而改变)
- 如果一个绝对定位的元素有定位流的祖先元素，以就近的定位流祖先元素作为参考点 （这个定位流祖先的条件排除静态定位）
- 绝对定位的元素会忽略祖先元素的padding属性
- 脱标准流margin:0 auto属性，无法进行元素水平居中 （这时设置left:50%,margin-left:元素宽度的一半来实现绝对定位元素水平居中）
# 固定定位
# 定义：固定定位可以让某个盒子不随着滚动条的滚动而滚动
# 半脱标准流
# 浮动流
# 定义：半脱离标准流的水平排版方式。
# 特点：
- 浮动流中没有居中对齐，margin:0 auto也不适用
- 浮动流不区分块级/行内/行内块级元素，元素都可以排版都可以设置宽高
- 浮动流不像标准流一样，内容撑不起宽高
# 清除浮动
使用浮动流会使后面的元素也跟着浮动，此时需要清除浮动来重置。
给前面一个父级元素设置高度 （在开发中我们能不写高度就不写高度，所以这种方式用得少）
给后面的盒子添加clear属性： （注意：给元素添加clear属性后,margin属性会失效）
外墙法 在两个盒子中间 添加一个 额外的块级元素 然后设置该元素clear:both属性 （此时第二个盒子使用margin-top属性有效） （此时第一个盒子使用margin-bottom属性无效）
内墙法 在第一个盒子中的最后添加一个额外的块级元素然后设置该元素clear:both属性 （此时第二个盒子使用margin-top属性有效） （此时第一个盒子使用margin-bottom属性无效） （—在开发中不常用隔墙法来清除浮动—）
使用伪元素对隔墙法进行优化（推荐）IE6需在父元素中加*zoom:1达到兼容
.box::after{
content:"";
display: block;
height:0;
visibility: hidden;
clear:both;
}
- 使用overflow: hidden .可以将超出标签范围的内容裁剪掉 .可以清除浮动 .可以通过该属性设置margin-top之后，后面的盒子不被顶下来（给父元素设置border也可以）
# z-index属性
- 仅在定位流中使用。
- 定位流元素都有z-index属性，用来控制元素在z轴上的位置。
- 默认定位流会覆盖标准流元素。
- z-index仅在同一级元素中比较，父元素的z-index在父元素级比较。