BFC(Box Formatting Context)

定义

BFC：块级格式化上下文，它是指一个独立的块级渲染区域，只有Box-level参与，该区域拥有一套渲染规则来约束块级盒子的布局，且与区域外部无关。

Box：CSS布局的对象和基本单位； Formatting Context：一块渲染区域，并且有一套渲染规则

那些元素会形成BFC

• 根元素(body)(有误？设置html：overflow:auto; body设置:overflow:auto;)
• float属性不为none
• position为absoulte或者fixed
• display为inline-block，table-cell，table-caption，flex，inline-flex
• overflow不为visibile

BFC布局规则

1. 内部的Box会在垂直方向上，一个接一个放置
2. Box垂直方向的距离由margin决定。属于一个BFC的两个相邻Box的margin会叠加
3. 每个元素的margin box的左边， 与包含块border box的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此。
4. BFC区域不会与float box重叠
5. BFC就是页面上一个隔离的独立容器，容器里的子元素不会影响到外面的元素。反之如此
6. 计算BFC高度时，浮动元素也要参与计算。

BFC作用

对于以上的规则，我们通过例子进行剖析，总结BFC的作用：

1. 自适应两列布局

    ```
      
        
            
   aside
            
   main
        
    ```
   

   效果图为：

   

   bfc-1

   参考第3条：

    每个元素的margin box的左边， 与包含块border box的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此。
   

   可知main的左边框和父元素的border接触。

   而依据第4条规定:

    BFC区域不会与float box重叠
   

   我们触发main的bfc，给其设置 overflow: hidden；可以得到如下的效果：从而实现了两列布局。

   

   bfc-2

2. 清除内部浮动

   
    
    
   
    
   
    
   
    
    
    ```
    
    
    
    效果图为： 
    
    
     
    
      
    
        
      
    
     
    
     
   
       bfc-3 
     
    
    
    
    
   参考第6条：
   
       计算BFC高度时，浮动元素也要参与计算。
   可知，父元素触发了bfc后，在计算父元素高度时会把浮动的子元素也计算在内，从而达到清除浮动的作用：
   ![bfc-4](http://upload-images.jianshu.io/upload_images/1975863-a3c5e90aa1f5deba.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
    
    
    
     
   防止垂直的margin重叠
    
    
    
    
       
       
           
   Haha
           
   Hehe
       
    
    
   效果为：
    
    
    
     
    
      
    
        
      
    
     
    
     
   
       bfc-5 
     
    
    
    
    
   可知两个相邻的元素，其margin发生的和重叠，两者之间的距离为20px。
    
    
   依据第2条：
    
    
   Box垂直方向的距离由margin决定。属于一个BFC的两个相邻Box的margin会叠加
    
    
   把第二个元素进行包裹，可以得到两者之间的margin扩大为两个元素margin之和：
    
    
       
       
           
   Haha
           
   
               
   Hehe
           
       
    
    
   效果为：
    
    
    
     
    
      
    
        
      
    
     
    
     
   
       bfc-6 
     
    
    
    
    
   总结
    
    
   上述的几个例子，都符合第5条规则：
    
    
   BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。
    
    
   因为BFC内部的元素和外部的元素绝对不会互相影响，因此， 当BFC外部存在浮动时，它不应该影响BFC内部Box的布局，BFC会通过变窄，而不与浮动有重叠。同样的，当BFC内部有浮动时，为了不影响外部元素的布局，BFC计算高度时会包括浮动的高度。避免margin重叠也是这样的一个道理