BFC模式原理及应用

---

一、什么是BFC模式

BFC(Block Fomatting Context)为块级格式化上下文的的简称。实质上可以理解为盒子内部一套自己的渲染规则，而这种渲染规则会影响着元素的定位以及与其兄弟元素之间的相互作用。一般当我们进行盒子布局的时候，形成BFC模式的盒子就会按自己的渲染规则布局和定位而不影响其他环境中的布局（常见的浮动元素脱离标准文档流，其内部子元素则按照其相应的渲染规则布局，而浮动元素之间则互不影响，其自身就像一个独立的容器）。

总结一下也就是说：如果一个元素符合了成为BFC模式的条件，该元素内部元素的布局和定位就和外部元素互不影响(除非内部的盒子建立了新的 BFC)，是一个隔离了的独立容器，拥有自己的渲染规则。（在 CSS3 中，BFC 叫做 Flow Root）

二、形成BFC模式的条件

float的值不为none
overflow值不为visible
position值不为static / relative
display的值为table-cell，table-caption， inline-block中的任何一个

三、BFC模式应用场景

1.高度坍塌（容器塌陷）看以下情景 ：

子元素设置浮动父元素高度坍塌

可以看到父元素的高度为0，子元素浮动后不能撑开父元素的高度造成容器塌陷这时只需给父元素设置

overflow: hidden;
zoom:1;   /*兼容IE9以下*/

父元素高度被撑起

2.阻止外边距margin叠加
当两个块级元素margin做如下设置时 ：

.div1 {
            width: 100px;
            height: 100px;
            background-color: blue;
            margin-bottom: 100px;
            /*overflow: hidden;
            zoom:1;   兼容IE9以下*/
        }
.div2 {
            width: 100px;
            height: 100px;
            background-color: #ff0000;
            margin-top: 50px;
            /*float: left*/
        }

marin会以大的为主，即实际两个div产生的margin只有100px，这时打开注释的代码，使其变为BFC模式你会发现margin不再折叠。

3.防止浮动元素遮住文档流中元素
当3列布局采用浮动的方法时难免会产生遮挡情况

.left {
            width: 200px;
            height: 800px;
            background-color: blue;     
            float: left;    
        }
        .right {
            width: 200px;
            height: 800px;
            background-color: green;
            float: right;
        }
        .center {
            width: 500px;
            height: 800px;
            background-color: #ff0000;
            /*overflow: hidden;*/           
        }

此时给中间元素设置overflow:hidden属性即可清除浮动。