CSS布局简介

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%); 可实现块级元素的垂直居中。

垂直居中