1.如何解决盒子塌陷问题
i.在父盒子添加一个新元素，并设置clear:both;
ii.为父元素设置overflow:hidden；或者overflow:auto；
iii.为父元素添加伪类after 并设置clear：both;（推荐）
iiii.给盒子固定的高和宽
iiiii.给父盒子也添加浮动
2.脱离文档流
position定位
float浮动
fixed定位
3.使用定位实现元素的绝对居中
设置 left:50%;top:50%;margin-left:-width/2;marigin-top:-height/2;
4.flex
flex-direction 主轴方向
flex-wrap 控制换行
justify-content 主轴对齐 start end center space-between space-around
项目位于主轴起点 项目位于主轴终点 居中 两端对齐且项目之间间隔相等 同上，但左右两端相较于父类有间隔
align-items 交叉单行对齐 start end center baseline(根据文字) stretch
align-content 交叉多行对齐 start end center space-between space-around stretch
(以上均在父容器设置)
order 设置项目的排列顺序 数值越小越靠前
flex-grow 设定项目放大比例
flex-shrink 设定项目缩小比例
flex-basis 设定伸缩基准值 以上三种缩写形式 flex: grow shrink basis;
align-self 可以设置单个项目在交叉轴上的排列方式 属性值与align-item一样
sticky定位是fix和relative和fixed的结合，一些时候是relative定位（定位基点是自身默认位置），另一些时候自动变成fixed定位（定位基点是视口）。 在设置的参数基础上改变定位方式
特点：1.以浏览器的可视窗口为参照点移动元素（固定定位特点）
2.粘性定位占有原先的位置（相对定位特点）
3.必须添加 top 、left、right、bottom 其中一个才有效
