BFC就是（Block Format Context）的缩写，直译为“块级格式化上下文”。
它有如下四个特点：
1. 它的垂直外边距（top和bottom）会与相邻元素的垂直外边距发生重叠
2. 它的内部元素不会对外部元素产生影响，外部元素也不会对它的内部元素产生影响
3. 不会与浮动元素发生重叠
4. 高度计算包括内部的浮动元素
每个特点的分析：
1. 只要是块级元素，它们的垂直外边距都会重叠，所以个人感觉这应该不算是特性。
2. 举例：一个父元素里面包含着一个子元素（假设他们都是块级元素）当子元素设置了margin-top 的时候，向下偏移的不是子元素本身而是父元素。
这是因为如果父元素没有设置 padding 同时也没有设置 border 的话，它的高度值等于第一个子元素的 border-top 到 最后一个子元素的 border-bottom 的这段距离。
如果设置了padding 或 border其中一个值的时候，那么父元素高度值就等于第一个子元素的 margin-top 到 最后一个子元素的margin-bottom 的这段距离。
通俗的说，如果父元素没有设置padding 同时也没有设置 border 的话，它是不会把第一个子元素的 margin-top 和 最后一个子元素的 margin-bottom 包含在内的，这就演变成子元素的 margin 外露导致影响到了父元素外部的其他元素的排版
要解决这个问题，可以有两种方法：
第一可以设置父元素的padding或border的值大于0。
第二可以将父元素转变为BFC，这样它内部元素就不能影响到外部布局，从而将子元素的margin包裹在父元素内部。
3. 正常情况下浮动元素会脱离文档流浮动在其它元素上方，但是浮动元素遇到BFC元素会正常排列，不会重叠。
4. 当父元素内部元素浮动之后，父元素的高度会塌缩，相当于子元素从父元素脱离。但是利用BFC这个特性可以将父元素设置为BFC，这样浮动的子元素还会包裹在父元素内部，避免了父元素的坍缩。就这样做到“清除浮动”的效果。
可以通过四种方式将元素转换为BFC：
1. 设置float不为none
2. 设置position不为static和relative
3. 设置overflow不为auto
4. 设置display为inline-block或table或table-cell
整体来看，主要通过使元素脱离文档流来使其成为BFC