BFC

block formatting context:块级格式化上下文 浮动元素和绝对定位元素，非块级盒子的块级容器（例如 inline-blocks, table-cells, 和 table-captions），以及overflow值不为“visiable”的块级盒子，都会为他们的内容创建新的块级格式化上下文。

讲BFC之前先讲清除浮动

1、BFC的作用

为脱离文档流的元素建立一个BFC，让它像块级元素一样排列在DOM中。

2、实现方法

overflow:hidden

3、实际用法

比如当两个div，一个正常一个浮动的时候，浮动的可能会叠加在正常的里面，因为浮动脱离文档流。这时候加上overflow：hidden，就可以实现布局了

再比如由于子节点的浮动导致脱离了父节点文档，所以父div没有被撑开，给父div加上overflow：hidden，就可以被撑开了。

4、clearfix:after

使用伪元素在元素之后插入内容，并利用伪元素来清除浮动。

.clearfix:after{
    content: '';
    display: block;
    clear: both
}