CSS 布局部分总结
首先，我发现伪类和伪元素其实在CSS3之前都是一个冒号的、CSS3为了更好区分则伪元素使用2个冒号，考虑兼容的话，两个都用单冒号。
布局：
是否支持IE8？
=> 是 => Float布局（定宽）
=> 否 => Flex布局（弹性布局）
原则：
1、万不得已，不写死宽高
2、尽量使用高级语法 calc、flex
3、若为IE、全写死（对IE来说，能正常显示都不错了）
Float布局（兼容到IE5）
1、儿子加上 float:left
.son{
float: left
}
2、父亲加上 clearfix
<div class="father clearfix">
<div class="son"></div>
</div>
3、不推荐在父亲加 overflow:hidden（经常会遇到BUG，涉及到BFC，结尾有说BFC）
4、在一些wrapper元素上加上min-width 防止错位
5、利用好padding、百分比去设置宽高
Float平均布局
父亲在IE6中使用
.clearfix:after {
content: '';
display: block;
clear: both
}
有时会发现不兼容，再加上
.clearfix:after {
*zoom: 1
}
就好了
* 儿子做平均布局，此时我有个需求，就是去除左右两边的儿子左右两边的12px空隙，达到如下图效果，怎么办？
我们开始的代码是这样：
// less
.father {
width: 980px;
.son {
float: left;
width: 320ox;
margin: 10px;
}
}
此时我们可以在son外层加一层wrapper，然后
// less
.father {
width: 980px;
.wrapper {
margin: 0 -10px;
.son {
float: left;
width: 320ox;
margin: 10px;
}
}
}
让wrapper添加负margin向左向右开拓10px的内容区域，刚好容纳下左右多出来的10px，就可以像上面那张图一样。
* 有一些场景运用flex布局会有一些bug
例如：
.father {
display: flex;
flex-wrap: wrap;
justify-content: space-around;
}
第二行不足三个的时候，就变成了上图的情况，这时就不要用flex布局了，用float布局或者用inline-block（有风险）等方法。
BFC
（block formatting context - 块状格式化上下文）
听名字我就觉得打扰了。
BFC有两个重要的特点也是它的作用所在：
1、父元素会包含所有子元素，如果子元素设置了flaot:left，除了父元素用clearfix方法，用BFC也可以达到一样的效果。
2、BFC与BFC之间不相互影响，用张鑫旭的话来说就是，儿子与儿子无论怎么样翻云覆雨，外部父元素也是风平浪静。可以用 float+div 作自适应布局。
一个BFC由下面条件之一创建：
1、float:除了none
2、position:absolute
3、overflow:非visible
4、内联元素
5、display: table-cell、flex 等
6、dispaly: flow-root（这个就是CSS3用来生成BFC所添加的属性，没有任何副作用，除了兼容性）
* 有时候BFC与BFC会有间隙，解决：比如A和B之间有空隙，给A元素右边设个负margin：
.A {
margin-right: -1rem; //根据实际情况调整
}
* BFC中垂直方向元素的margin会合并，解决：元素加个边框，或者元素与元素之间加个看不见的border，再或者就是直接让元素生成BFC。
* 计算BFC的高度时，浮动元素也参与计算（清除子元素浮动原理），用BFC清除浮动有时有副作用，clearfix没有。
BFC总而言之`
1、父亲管float儿子
2、兄弟之间划清界限（float+div自适应布局）
