BFC(块级格式化上下文)

概念

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

特点

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;
}
    
section-1
    
section-2

效果图

图一

图二

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

      .section-3 {
        border: 1px solid red;
        width: 100%;
      }
      .section-block{
        float: left;
        height: 20px;
      }
    

        
section-block
    

对于非BFC块的效果：

非BFC

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

BFC

所以BFC可以令浮动元素占据一定的高度