BFC

Block Formatting Context -块级格式化上下文

布局规则

1. 内部的盒子会在垂直方向，一个个得放置
2. 盒子垂直方向的距离由margin决定，属于同一个BFC的两个相邻Box的上下margin会发生重叠
3. 每个元素的左边，与包含的盒子的左边相接触，即使存在浮动也是如此
4. BFC的区域不会与float重叠
5. BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素，反之也是如此
6. 计算
7. BFC的高度是，浮动元素也参与计算

产生BFC规则

1. 根元素
2. float的属性不为none
3. position为absolute或fixed
4. display为inline-block, table-cell, table-caption, flex
5. overflow不为visible

例子

自适应两栏布局: https://jsfiddle.net/vuji/bv7spn1t/
清除浮动：https://jsfiddle.net/vuji/bzx26dn0/
margin重叠: https://jsfiddle.net/vuji/mtzy8ung/