1.左右布局
使用float: left; 可以实现左右布局，但是会有bug，在父级元素加上一个clearfix属性就没有bug啦。
以下是clearfix的css代码：
.clearfix::after{
content: '';
display: block;
clear: both;
}
实现效果如下：
正常布局
左右布局
2.左中右布局
CSS左中右布局，要注意的是middle元素要放在最后一个。
实现效果如下
左中右布局
3.水平居中
1)块级元素行内居中
使用margin: 0 auto; 增加左右两边外边距使块级元素居中
块级元素行内居中.png
1)行内元素居中
在行内元素的父级写入text-align: center; 使行内元素居中
行内元素居中.png
4.垂直居中
使用 top: 50%; transform: translateY(-50%); 可实现块级元素的垂直居中。
垂直居中
