2019-01-26

一、总结一下CSS的几种布局以及实现方法

---

• 左右布局
• 左中右
• 水平居中
• 垂直居中

1. 左右布局

左右布局很多种实现方法 目前使用的是float(浮动)属性，给所有子元素添加浮动，添加后需要在父元素上添加clearfix。添加浮动属性后一定会有bug，所以用到clearfix秘技：

clearfix::after {
    content: "";
    display: block;
    clear: both;
}

还有用position脱离文档流的方法也可以做到，用的不多 需要勤加练习。

2. 左中右布局

这个就比较好办了，将元素display属性调整为inline-block,并设置元素的width属性就好了～

3. 水平居中

设置margin的高度，然后左右auto。

4. 垂直居中

首先将子元素设置display: inline-block，然后在父元素上添加text-align: center。