BFC(块格式化上下文)

1、概念

BFC（block formatting context）块格式化上下文是web页面的可视化css渲染的一部分，是布局过程中生成块级盒子的区域，也是浮动元素与其他元素交互限定的区域。

2、创建BFC

1、根元素或包含根元素的元素

2、浮动元素（元素float不为none）

3、绝对定位元素（元素position为absolute或fixed）

4、行内块元素（元素display为inline-block）

5、表格单元格（元素的display为table-cell）

6、表格标题（元素的display为table-caption）

7、overflow的值不为visible的元素

8、弹性元素（display为 flex 或 inline-flex元素的直接子元素）

9、网格元素（display为 grid 或 inline-grid 元素的直接子元素）

3、BFC特性

1、BFC是一个独立的容器，容器内的元素不会影响容器外的元素，容器外的元素也不会影响容器内的元素。

2、在同一个BFC中，相邻的块级盒子的垂直外边距会发生重叠。

3、BFC区域不会和浮动盒子发生重叠。

4、BFC能够识别和包含浮动元素，当计算区域的高度时，浮动元素也可以参与计算。

5、盒子从顶端开始垂直的一个接一个的向下排列，盒子之间垂直的间距由margin决定。

4、BFC的应用

1、包含浮动元素，清除浮动

html:

<div class="container">
        <div class="Sibling"></div>
        <div class="Sibling"></div>
</div>

css:
.container { 
        overflow: hidden; /* creates block formatting context */ 
        background-color: green; 
} 
.container .Sibling { 
        float: left; 
        margin: 10px;
        background-color: lightgreen;  
}
           

特别提示：

通过 overflow:hidden 创建 BFC，固然可以解决高度塌陷的问题，但是大范围应用在布局上肯定不是最合适的，毕竟 overflow:hidden 会造成溢出隐藏的问题，尤其是与 JS 的交互效果会有影响。推荐使用伪类方式实现清楚浮动。

2.导致外边距折叠

相邻的两个盒子（可能是兄弟关系也可能是祖先关系）的垂直边距相遇时， 它们将形成一个外边距。这个外边距的高度等于两个发生折叠的外边距的高度中的较大者。外边距折叠（Margin collapsing）只会发生在属于同一BFC的块级元素之间。

html:
<div class="Container"> 
    <p>Sibling 1</p> 
    <p>Sibling 2</p> 
</div>

css:
.Container { 
    background-color: red; 
    overflow: hidden; /* creates a block formatting context */ 
} 
p { 
    background-color: lightgreen; 
    margin: 10px 0; 
}
           

3、避免外边距重叠

创建一个不同的 BFC ，就可以避免外边距折叠。

html:
<div class="Container"> 
        <p>Sibling 1</p> 
        <p>Sibling 2</p> 
        <div class="newBFC"> 
            <p>Sibling 3</p> 
        </div> 
</div>

css:
.Container { 
            background-color: red; 
            overflow: hidden; /* creates a block formatting context */ 
} 
p { 
            background-color: lightgreen; 
            margin: 10px 0; 
}
.newBFC { 
            overflow: hidden; /* creates new block formatting context */ 
}