本文已参与[新人创作礼]活动，一起开启掘金创作之路。
一、BFC的含义：根据W3C标准，在页面中的元素都有一个隐含的属性叫做Block Formatting Context，直译为“块级格式化上下文”。
- 它是一个独立的渲染区域，只有Block-level box（块）参与， 它规定了内部的Block-level Box如何布局，并且与这个区域外部毫不相干。该属性可以设置打开或者关闭，默认是关闭的，开启BFC有助于避免高度塌陷的问题。
二、当元素开起BFC属性后，元素具有如下的特性/布局规则：
①.内部的Box会在垂直方向上一个接一个的放置。
②.垂直方向上的距离由margin决定，属于同一个BFC的两个相邻Box的margin会发生重叠
（按照最大margin值设置）
③.bfc的区域不会与float的元素区域重叠。
④.计算bfc的高度时，浮动元素也参与计算
⑥.bfc就是页面上的一个独立容器，容器里面的子元素不会影响外面元素。
三、开启BFC的方法：
①.浮动元素，float 除 none 以外的值；
②.定位元素，position（absolute，fixed）；
③.display 为以下其中之一的值 inline-block，table-cell，table-caption；
④.overflow 除了 visible 以外的值（hidden，auto，scroll）；
四、BFC的应用 1、自适应两栏布局 2、清除内部浮动(高度塌陷) 3、防止margin上下重叠
注：因为BFC内部的元素和外部的元素绝对不会互相影响，因此， 当BFC外部存在浮动时，它不应该影响BFC内部Box的布局，BFC会通过变窄，而不与浮动有重叠。同样的，当BFC内部有浮动时，为了不影响外部元素的布局，BFC计算高度时会包括浮动的高度。避免margin重叠也是这样的一个道理。
