CSS的常见布局
CSS常见布局使用display属性（文档流）+position属性（定位）+float属性（浮动）。
inline-block
display:inline-block属性既可以像行级元素一样水平分布，也可以像块级元素一样设置宽高，如果空间够就可以实现左右布局。
float（应用较广）
给要并排的子元素加上style=float:left(或right)，他们的父元素添加class:clearfix，即可脱离文档流，实现排排坐。clearfix的css为
.clearfix::after { content=" "; display:block; clear:both;}
flex（不能兼容ie）
flex是一种新的布局方式
a. flex布局与方向无关
b. 可实现空间的自动分配、自动对齐
1、左右布局
float百分比布局
.clearfix::after{content:' ';display:block;clear:both; }
.left{float:left;height:200px;width:2%;background: red; }
.right{float:left;height:200px;width:8%;background: blue; }
注：用于布局的div中不要添加其他margin、padding等，需要的话在里面再加元素。
flex布局
.content{display:flex; }
.left{float:left;height:200px;width:100px;background: red; }
.right{float:left;height:200px;background: blue;flex-grow:1; }
2、左中右布局
flex布局
.content{display:flex; }
.middle{height:200px;background:yellow;flex-grow:1;margin:010px; }
.left{height:200px;width:100px;background:red; }
.right{height:200px;width:150px;background:blue; }
3、水平居中：
div的左右margin为auto
内联元素的父元素加上text-align:center;
4、垂直居中：单行元素line-height跟height相等就垂直居中
line-height+padding
5、flex的完美居中
display:flex;justify-content:center;align-items:center;
