什么是BFC

• 直译：块级格式化上下文 -> Block fomatting context = block-level box + Formatting Context

• 解释：BFC是一个独立的渲染区域，只有Block-level box参与，它规定了内部元素如何布局，并且与这个区域外部毫不相干。

• BFC生成：CSS2.1中规定满足下列CSS声明之一的元素便会生成BFC

  1. 根元素
  2. float的值不为none
  3. overflow的值不为visible(一般为hidden)
  4. display的值为inline-block、table-cell、table-caption
  5. position的值为absolute或fixed

• BFC的约束条件

  1. 内部的Box会在垂直方向上一个接一个的放置
  2. 垂直方向上的距离由margin决定。（完整的说法是：属于同一个BFC的两个相邻Box的margin会发生重叠（塌陷），与方向无关。）
  3. 每个元素的左外边距与包含块的左边界相接触（从左向右），即使浮动元素也是如此。（这说明BFC中子元素不会超出他的包含块，而position为absolute的元素可以超出他的包含块边界）
  4. BFC的区域不会与float的元素区域重叠
  5. 计算BFC的高度时，浮动子元素也参与计算
  6. BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面元素，反之亦然

BFC在布局中的应用

• 防止margin重叠

代码：

  
        
hahaha
hehehe
复制代码

现象：两个p之间的距离为100px，发送了margin重叠（塌陷）

解决：根据BFC布局规则第二条

Box垂直方向的距离由margin决定。属于同一个BFC(上例中是body根元素的BFC)的两个相邻Box的margin会发生重叠

  
        
hahaha
    
     
hehehe
    
复制代码

结果：

• 清除内部浮动

代码：

 
      
    
 
     
 
     
    
复制代码

现象：

解决：根据BFC布局规则第六条

计算BFC的高度时，浮动元素也参与计算

所以把par生成BFC，即把注释去掉

结果：

• 自适应多栏布局

  代码：

  
          
    
    
    
复制代码

现象：

解决：根据BFC布局规则第四条

BFC的区域不会与float box重叠。

那就让main生成BFC，这个新的BFC将不在于aside重叠

.main {   overflow: hidden;}复制代码

结果：

• 自适应多栏布局

类似前者,直接上图

把中间元素生成BFC就可以了

• 总结

上面的例子都体现了

BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。

参考：