块级格式化上下文（Block Formatting Context）简称BFC
BFC的目的就是：形成一个完全独立的空间，让空间中的子元素不会影响到外面的布局。如何才能形成这样一个神奇的空间呢？
我们通过CSS为元素设置一些属性，就能触发，常用的有四种：
float不为none
postion不为relative和static
overflow为auto scroll和hidden
display的值为inline-block
BFC能解决什么问题呢？
1、解决浮动元素令父元素高度塌陷的问题
如，父元素div包含几个子div，这几个子元素都为浮动时，父元素高度坍塌，这是因为浮动的子元素脱离了文档流，漂浮于父元素之上，父元素检测不到子元素的存在，获取不到子元素高度（说白了就是脱离文档流 父元素不会计算该高度），所以看起来父元素没有高度了。父元素后面的布局也就乱了，这时，可以给父元素添加属性overflow：hidden，当然，这只是一种BFC的做法，还可以display: table-cell;或position: fixed;或position: absolute;
触发了BFC的容器就是页面上的一个完全隔离开的容器，容器里的子元素绝对不会影响到外面的元素，为了保证这个规则，触发了BFC的父元素在计算高度时，不得不让浮动的子元素也参与进来，变相的实现了清楚内部浮动的目的。
2、解决外边距垂直方向重合问题
垂直方向上两个兄弟元素外边距会取最大值，而不是取和，那么我们可以通过触发BFC来防止他们之间相互影响。为其中一个元素的外边包裹一层父元素，并且触发父元素BFC，比如：overflow： hidden，这样打破原有格局，就不再会重叠啦！