BFC

BFC(块级格式化上下文)

BFC是什么

BFC是一个独立的布局环境，它内部的元素布局与外界互不影响。
产生了BFC的元素内的布局环境：

• 计算该元素的高度时,浮动子元素的高度也参与计算
• BFC区域不会与非该区域内的浮动元素重叠
• 创建BFC的元素不会与它的子元素进行外边距合并,即：处于不同BFC区域的元素之间不会发生外边距合并。

形成BFC的条件

BFC渲染区域由某个HTML元素创建,以下元素会创建：

• 根元素（html元素）
• 浮动、绝对与固定定位元素
• overflow不等于visible的块盒
• display为inline-block、table-cell、table-caption、flex的元素

1、一般情况下，在计算元素高度不会将其子元素中的浮动元素计算在内：

    
    
        

          
1
          
2
          
3
          
4
        
    

显示效果如下：

我们通过设置main元素overflow:hidden让其产生BFC区域：

    
    
        

            
1
            
2
            
3
            
4
        
    

得到的效果为：

2、一般情况下,常规流块盒在排列时会忽略浮动元素，导致被浮动元素被覆盖，例如：

效果如下：

通过设置item2元素的overflow:hidden让其产生BFC区域

item2在排列的时候避开了浮动元素item1，效果如下：

3、在有时候我们会发现，父子元素之间发生了外边距合并：

效果如下：

我们通过设置parent元素的overflow：hidden使其产生BFC区域

效果如下：

以上这三种情况是BFC常见的应用：

• 解决浮动元素令父元素高度坍塌问题
• 解决非浮动元素被浮动元素覆盖的问题
• 解决外边距合并的问题