关于BFC的理解

block - format - context 块级格式化上下文
页面上隔离的独立的容器 里面的子元素不会影响到外面的元素 反之亦然
生成BFC条件：

设置了float 不为none
overflow不为visible
display为inline-block table-cell table-caption
position为absolute或fixed

BFC的约束规则重要的点

同一个BFC内 相邻两个box的margin会发生重叠
同一个BFC内的子元素不会超出他的包含块
BFC区域不会与float的元素区域重叠
计算BFC的高度时 浮动子元素的高度也参与计算

应用

防止margin重叠 需要把其中一个设置成BFC
浮动： 子元素浮动，设置父元素overflow: hidden; 或者浮动父元素，父元素高度就不会塌陷，就是利用了BFC 子元素参与父元素高度计算
多栏布局：例如三栏布局 左右固定宽 中间自适应 左右两栏设置浮动 中间部分设置BFC（overflow: hidden;）