BFC

 

BFC 是什么

        FC( formatting context ) 格式化上下文，是页面中的一块渲染区域，而且有一套渲染规则，它决定了其子元素将如何定位，以及和其余元素的关系和相互做用。

        BFC( block formatting context ) 块级格式化上下文， 它是一个独立的渲染区域，只有Block-level box参与， 它规定了内部的Block-level Box如何布局，而且与这个区域外部绝不相干。

如何触发BFC

       一、float属性不为none

       二、position为absolute或fixed

       三、display为inline-block, table-cell, table-caption, flex, inline-flex

       四、overflow不为visible

BFC 的做用

       一、清理浮动

        代码：

浮动清理前

        结果：

        

       清理浮动：

      1） 添加代码：

.wrapper{
        overflow:hidden;  
}

       结果（父级依旧为块级block）：

       

       2) 添加代码：

.wrapper{
    float: left;
}
/*或者*/

.wrapper{
    position: absolute;
}

/*或者*/

.wrapper{
    display: inline-block;
}

        结果（父级为 inline-block）：

        

         缘由是块级元素设置了  float:left/right;  或者  position:absolute/fixed； 后， 内部会把块级元素转换为 display:inline-block; 

 

注意：

        在为了解决问题而添加 BFC规则时，须要根据实际状况慎重选择合适的方法触发，好比上面的清理浮动，若是父级盒子必须为block, 就最多只能选择 overflow:hidden;  可是有时候子元素须要超出父元素，这时就不能用 overflow:hidden;  若是父元素又要为block 又要子元素超出父元素，这时就能够使用 伪元素 ::after来解决(http://www.javashuo.com/article/p-oqjbybgy-du.html)。