1.何为BFC？
BFC（Block Formating Context）块级格式化上下文，是Web页面的一块独立的渲染区域，具有BFC特性的元素可以看成是一个独立的容器，容器内部的元素在布局上不会影响到外面的元素。
2.触发BFC的条件
- 根元素（
<html>） float不为none的元素position为fixed或absolute的元素overflow不为visible的元素display为inline-block、table-cell、flex等的元素
3.同一个BFC内的布局规则
- box会在垂直方向上一个接一个放置
- 垂直方向上的距离由
margin决定，属于同一个BFC的两个相邻的box的margin会发生重叠，以最大的margin为合并值 - BFC内部每个元素的
margin-left与父节点的左边接触（对于从左往右格式化而言，否则反之） - BFC区域不会与float元素的区域重叠
- 计算BFC元素高度时，其浮动子元素也参与计算
4.BFC的应用
- 分属于不同的BFC时，可以放置
margin重叠 - 清除内部浮动（给父元素开启BFC）
- 适应多栏布局