BFC（块级元素格式化上下文）Block Formatting Context，它是一个独立的渲染区域，只有块级元素才有

一、BFC是啥？

Block Formatting Context，它是一个独立的渲染区域，只有块级元素才有BFC,它规定了内部的Block Box如何布局，并且与这个区域外部毫不相干。

二、那些元素会生成BFC

①、根元素。

②、浮动元素。

③、position为absolute或者fixed。

④、非块级元素转换成块级元素,例如：display:inline-block,flex等。。

⑤、overflow属性不为visible。

三、BFC的一些作用。

1、自适应两栏布局

初始代码：

<style>   
 body {  
      width: 300px;  
      position: relative;   
 }     
.aside {    
      width: 100px;   
      height: 150px;      
      float: left;        
      background: #f66;   
 }     
.main {     
      height: 200px;    
      background: #fcc; 
   }
</style>
<body>   
 <div class="aside"></div>    
<div class="main"></div>
</body>

初始效果：

æ¤å¤è¾å¥å¾ççæè¿°

上面因为aside元素向左浮动脱离字节流，导致其覆盖在main之上。那有什么办法能让其不在main上空呢？

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

因为BFC的这一规则，可以将main元素转为BFC元素，例

.main {    overflow: hidden;}

效果如下：

æ¤å¤è¾å¥å¾ççæè¿°

2、浮动元素的父元素高度塌陷的解决。

初始代码：

<style>    .par {        border: 5px solid #fcc;        width: 300px;    }     .child {        border: 5px solid #f66;        width:100px;        height: 100px;        float: left;    }</style><body>    <div class="par">        <div class="child"></div>        <div class="child"></div>    </div></body>

初始效果：

æ¤å¤è¾å¥å¾ççæè¿°

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

添加代码：

.par {    overflow: hidden;}

效果：

æ¤å¤è¾å¥å¾ççæè¿°