BFC (Block Fomatting Context)
一、定义：
块级格式化上下文。 block-level box(块级元素) + formatting context(一个决定如何渲染文档的容器) 。
它是一个独立的渲染区域，只有Block-level box参与， 它规定了内部的Block-level Box如何布局，并且与这个区域外部毫不相干。
Box 定义：
css布局的对象和基本单位。不同类型box内的元素会以不同的方式渲染。
Box分类：
1、display属性为 block, list-item, table 的元素，会生成block-level box；并且参与 block fomatting context；
2、display 属性为 inline, inline-block, inline-table 的元素，会生成inline-level box。并且参与 inline formatting context；
Fomatting Context
Formatting context是W3C CSS2.1规范中的一个概念。它是页面中的一块渲染区域，并且有一套渲染规则，它决定了其子元素将如何定位，以及和其他元素的关系、相互作用。
最常见的 Formatting context 有 Block fomatting context (简称BFC)和 Inline formatting context(简称IFC)。
二、BFC布局规则
1、内部的Box会在垂直方向上一个接一个的放置。
2、垂直方向上的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠。
3、每个元素的左外边距与包含块（父元素）的左边界相接触（从左向右时），即使浮动元素也是如此。
4、BFC的区域不会与float的元素区域重叠。
5、计算BFC的高度时，浮动子元素也参与计算。
6、BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面元素，反之亦然。
三、BFC的创建
1、float的值不是none。
2、position的值不是static或者relative。
3、display的值是inline-block、table-cell、flex、table-caption或者inline-flex 注：display：table也认为可以生成BFC，主要原因在于table会默认生成一个匿名的table-cell，正是这个匿名的table-cell生成了BFC
4、overflow的值不是visible
5、根元素会自动创建BFC
语言描述：浮动元素和绝对定位元素，非块级盒子的块级容器，以及overflow值不为“visiable”的块级盒子，都会为他们的内容创建新的BFC（块级格式上下文）。
四、BFC的应用
1、利用BFC避免margin重叠
场景：一个div内俩个p子元素设置了margin:10px，结果会显示俩个子元素垂直方向间距为10px，实际应为20px 注意：如果第一个p子元素margin:8px;那么子元素垂直方向间距为10px,以最大数值为准。
原因：属于同一个BFC的两个相邻的Box会发生margin重叠
解决：将第二个子元素放进新的div标签内，相当于激活第二个子元素在一个新的BFC内 或者 将2个子元素设置display:inline-block;此时每个子元素都生成一个BFC
解决原理：生成 BFC 的元素不会和在流中的子元素发生空白边折叠
2、自适应俩栏布局
场景：一个div内有div.left和div.right，其中.left设置width，height，float:left; .right只设置高度，会出现div.left和div.right的左上角是重合的。
原因：每个盒子的margin box的左边，与包含块（父块）border box的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此（尽管一个元素的内容区域会由于浮动而压缩–包裹性）。
解决：.right添加overflow:hidden，使之单独成为一个BFC。 同时.right会自动的适应宽度，这时候就形成了一个两栏自适应的布局。
解决原理：BFC的区域不会与float box重叠。
多栏布局同理，可以.left{float:left;xxpx;} .right{float:right;xxpx;} .center{overflow:hidden;height:yypx;} 会实现 左右两栏宽度固定，中间栏根据浏览器宽度自适应。
3、清除浮动
场景：父元素div只设置width，俩个div子元素设置width，height，float:left; 会出现父元素高度未随子元素展开。
原因：当不给父节点设置高度，子节点设置浮动的时候，会发生高度塌陷
解决：清除浮动，给父元素设置overflow:hidden;
解决原理：计算BFC的高度时，浮动子元素也参与计算。
总结：BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。
因为BFC内部的元素和外部的元素绝对不会互相影响，因此， 当BFC外部存在浮动时，它不应该影响BFC内部Box的布局，BFC会通过变窄，而不与浮动有重叠。同样的，当BFC内部有浮动时，为了不影响外部元素的布局，BFC计算高度时会包括浮动的高度。避免margin重叠也是这样的一个道理。