一.display屬性為block,lit-item,table就會產生BFC。BFC的布局特性：有width（寬）,height（高）,border（邊框）,margin（外邊距）,padding（內邊距）,element(元素)
二.元素屬性為:float屬性不為none；position為absolute或者fixed；display為inline-block,table-cell,table-caption,flex,inline-flex；overflow不為visible
三.BFC布局特性
1. 在BFC中，盒子從頂端開始垂直的一個接一個的排列
2. 盒子垂直方向的距離有margin決定。屬于同一個BFC的兩個相鄰盒子的margin會發生合并
```
div{
height: 80px;
overflow: hidden; /*防止外邊距合并*/
}
div .div2{
width: 1200px;
height: 40px;
margin: 20px auto;
}
```
3. 在BFC中，每一個盒子的左外邊緣（margin-left）會觸碰到容器的左邊緣（border-left）(對于從左到右的格式來說，則是觸碰到右邊緣)
4. BFC的區域不會與浮動盒子產生交集，而是緊貼浮動邊緣
5. 計算BFC的高度時，自然也會檢測浮動的盒子的高度（清除浮動）。
```
.father{
width: 300px;
overflow: hidden;
}
.son1,son2{
width: 100px;
height: 100px;
float: left;
}
```
BFC是一個獨立渲染的區域，只有塊級元素參與，它規定了塊級元素如何布局，并且與這個區域外部毫不相干
