浮动布局（y轴）
float:left浮动元素：
1.脱离文档流
2.块元素的宽度不再是100%，由内容决定
3.块元素不再支撑其父元素
4.同一层次（兄弟关系）浮动元素会在一行排列，当浮动元素宽度总和大于父元素的时候发 生换行。
clear 清理浮动
clear:left不与左浮动元素在同一水平线上
clear:right不与右浮动元素在同一水平线上
伸缩盒布局（x轴）
概念
1.伸缩盒容器
2.伸缩盒元素
主轴 默认主轴为x轴，伸缩盒中，伸缩盒子元素沿着主轴来进行排列
交叉轴 与主轴垂直的轴
规则
伸缩盒容器
display:flex; 强制让他的在元素沿着主轴方向中显示，并且子元素不会脱离，交叉轴上元素的高度 如果没有指定，应该和父元素保持一致
fle-direction:row;定义主轴方向，row表示主轴是x轴 column表示主轴为y轴
felx-wrap:nowrap当子元素长度甲起来超过主轴上的父元素的高度时，默认不换行
align-items: ;定义伸缩盒容器中的子元素在交叉轴上的排列方式
justify-content: ;定位仪伸缩盒容器中的子元素在主轴上的排列方式
伸缩盒元素
flex-basis: 100px;主轴上的基础长度
flex-grow: 1主轴上剩余空间的分配份数
flex-shrink: 1主轴上亏损空间的分摊
定位布局（z轴）
非定位元素
position:static定位元素：可以使用定位属性，top right bottom left
position:relative不脱离文档流；相对于自身原来所在位置来进行定位
position:absolute;脱离文档流；相对于距离他最近的父定位元素来进行定位
position:fixer;脱离文档流：相对于浏览器视口来进行定位
position:sticky;在没有达到阈值前不脱离文档流（相对定位），达到阈值后脱离文档流（固定定位）
应用场景
特殊场景布局：二级栏目、广告
实现块元素的居中
left/margin-left
