flex弹性布局
flex是一种一维的布局，是因为一个flex一次只能处理一个维度上的元素布局，一行或者一列。
- 基础使用
display: flex; //使用flex弹性布局
flex-direction: row; //排列方向 row、column、row-reverse、column-reverse。 使用row主轴为横向，交叉轴为竖向；使用column主轴为竖向，交叉轴为横向
flex-wrap: wrap; //warp内容太大而无法全部显示在一行中，则会换行显示 ；nowarp默认不换行，将会缩小以适应容器
align-items: center; //元素在交叉轴方向对齐方式。stretch、flex-start、flex-end、center
justify-content: space-around; //元素在主轴方向上对齐方式。stretch、flex-start、flex-end、center、space-around、space-between
grid网格布局
CSS 网格布局擅长于将一个页面划分为几个主要区域，以及定义这些区域的大小、位置、层次等关系（前提是 HTML 生成了这些区域）。
- 基础使用
display: grid; //使用网格布局
grid-template-columns: repeat(3, 1fr); //grid-template-columns、grid-template-rows基于网格列、行的维度，去定义网格的尺寸大小
grid-gap: 10px 10px; //网格行与列之间的间隙
float浮动布局
指定一个元素沿其容器的左侧或右侧放置，允许文本和内联元素环绕它。
当一个元素浮动之后，它会被移出正常的文档流，然后向左或者向右平移，一直平移直到碰到了所处的容器的边框，或者碰到另外一个浮动的元素。
float:left; //right
position定位
指定一个元素在文档中的定位方式。top，right，bottom 和 left 属性则决定了该元素的最终位置。
//static正常的布局行为，即元素在文档常规流中当前的布局位置。此时 top, right, bottom, left 和 z-index 属性无效。
position: static;
//相对定位元素，元素先放置在未添加定位时的位置，再在不改变页面布局的前提下调整元素位置（因此会在此元素未添加定位时所在位置留下空白）
position: relative;
//绝对定位元素，元素会被移出正常文档流，并不为元素预留空间，通过指定元素相对于最近的非 static 定位祖先元素的偏移，来确定元素位置。
position: absolute;
//固定定位元素，元素会被移出正常文档流，并不为元素预留空间，而是通过指定元素相对于屏幕视口（viewport）的位置来指定元素位置。
position: fixed;