概念

它规定了一块区域作为上下文，在里面的渲染规则，子元素将如何定位，以及和其他元素的关系和相互作用。

特点

BFC内部的元素和外部处于隔离状态，不会互相影响

触发 BFC

• body 根元素
• 浮动元素：float 除 none 以外的值
• 绝对定位元素：position (absolute、fixed)
• display 为 inline-block、table-cells、flex
• overflow 除了 visible 以外的值 (hidden、auto、scroll)

特性

1. 同一个 BFC 下外边距会发生折叠

.section-1 {
        border: 1px solid red;
        margin: 10px;
      }
.section-2 {
      border: 1px solid blue;
      margin: 20px;
}
    <div class="section-1">section-1</div>
    <div class="section-2">section-2</div>

效果图

图一

图二

2. BFC 可以包含浮动的元素（清除浮动）

      .section-3 {
        border: 1px solid red;
        width: 100%;
      }
      .section-block{
        float: left;
        height: 20px;
      }
    <div class="section-3">
        <div class="section-block">section-block</div>
    </div>

对于非BFC块的效果：

非BFC

为section-3加上over-flow属性使其变成BFC后:

BFC