一.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是一个独立渲染的区域，只有块级元素参与，它规定了块级元素如何布局，并且与这个区域外部毫不相干
