CSS布局技巧
1. Float布局：
float属性用于定义元素在父元素中的浮动方式。- 浮动元素会脱离正常文档流，并根据
float属性值的设置向左或向右浮动。（会脱离文档流） - 浮动元素会影响其他非浮动元素的位置，使其环绕浮动元素。
2. Position布局：
position属性用于定义元素的定位方式，有四个值可选：static、relative、absolute、fixed。relative：相对定位，元素根据自身在正常文档流中的位置进行定位，可以通过top、left、right、bottom属性来控制元素相对于原始位置的偏移。（不会脱离文档流）absolute：绝对定位，元素根据离它最近的已定位祖先元素进行定位，如果没有已定位的祖先元素，则相对于文档进行定位。（会脱离文档流）fixed：固定定位，元素相对于浏览器视口进行定位，即不随滚动条的滚动而变化。（会脱离文档流）
3. Flex布局：
-
布局的传统解决方案，基于盒状模型，依赖
display属性 +position属性 +float属性。它对于那些特殊布局非常不方便，比如，垂直居中就不容易实现。因此出现了Flex布局 -
弹性盒子布局是一种灵活的布局模型，用于在容器中进行自适应和对齐。
-
弹性盒子由容器和内部项目组成，通过设置容器的属性来控制项目的布局。
-
容器的属性：
display: flex，用于将容器设置为弹性盒子；flex-direction，用于设置项目在主轴上的排列方式；justify-content，用于设置项目在主轴上的对齐方式；align-items，用于设置项目在交叉轴上的对齐方式。 -
项目的属性：
flex-grow，用于设置项目的放大比例；flex-shrink，用于设置项目的缩小比例；flex-basis，用于设置项目的初始长度；order，用于设置项目的排列顺序。
