垂直居中的方式

1.第一种父元素使用定位position:relative 来做为一个参考，然后子元素设置为position:absolute绝对定位来参考父元素，然后设置:
left:0;
top:0;
right:0;
bottom:0;
margin:auto;
元素就自动居中了。

2.第二种使用绝对定位，left:50%，top:50%让子元素定位到父元素中间，然后再用外间距margin-left和margin-top减去子元素的一半，让子元素居中。

3.第三种使用绝对定位，left:50%，top:50%让子元素定位到父元素中间，然后再用2D平移 transform:translate减去子元素的一半，让元素居中。

4.第四种将子元素转换成行内块，然后给父元素设置line-height行高，text-align:center文本居中，
再给子元素设置vertical-align:middle垂直对齐，最后在子元素后添加一个span空标签，就可以让子元素居中了

5.第五种直接使用弹性盒display:flex，在给justify-content主轴垂直居中，和align-seif:center侧轴垂直居中，让子元素在中间显示。

6.第六种直接使用网格布局。

清除浮动

1.第一种是最常用的，没有什么副作用，就是代码比较多一点。
:after{
content:""; 生成内容为空
display:block; 生成的元素以块级元素显示
clear:both; 清除前面元素浮动带来的影响

2.第二种，在父元素后，追加空子元素，并设置其clear属性为both
clear是CSS中专用于清除浮动的属性
作用：清除当前元素前面的元素浮动带来的影响

3.第三种，浮动的影响就是高度塌陷，直接设置父元素高度，就清除浮动的影响了，缺点就是固定死了父元素高度。

4.第四种为父元素添加overflow:hidden，直接清除浮动，缺点是有内容要溢出显示，会被隐藏。

5.第五种设置父元素浮动

6.第六种父元素设置display:table