块级格式化上下文（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的父元素在计算高度时，不得不让浮动的子元素也参与进来，变相的实现了清楚内部浮动的目的。