BFC
首先BFC的英文全称Block Format Context，也就是块级格式化上下文。
BFC特性
首先，我们大家都知道的BFC特性：
- 内部的元素会在垂直方向，从顶部一个接一个的放置
- Box垂直方向的距离由margin决定，属于同一个BFC的两个相邻Box的margin会发生重叠。
- 每个元素的margin box的左边，与容器块border box的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此；
-
BFC的区域不会与float box重叠。 - BFC就是页面一个独立的容器，容器里面的元素不会影响到外面的元素，反之亦然。
- 计算BFC的高度时，浮动元素也会参与计算
创建BFC方法
下面也是大家都熟悉的创建BFC的方法
- 根元素
- float不为none
- overflow不为visible
- display为
table-cell,table-caption,inline-block,flex,inline-flex,flow-root其中最后一个为专门创建BFC的属性 - position为
absolute,fixed
实例
实例1
从实例1可以看到特性1，内部元素会从顶部一个接一个的放置，并且属于同一个BFC的两个相邻的margin会发生重叠。如何解决边距重叠的问题呢？此时我们需要给元素套上一个父元素，将父元素变成BFC。
这样便可以解决边距重叠问题。
实例2
从实例2上可以看到，元素的外边距会触碰到包含块容器的外边框，也就是元素左边与容器左边相接触，与浮动元素发生了重叠。
当右面元素触发BFC的时候，不会与左面元素发生重叠，见实例
实例3
当两个子元素都进行浮动时，此时父元素的高度会消失，第六个特性，计算BFC的高度时，浮动元素也会参与计算，此时我们触发父元素的BFC。实例
此时发现高度会重新被撑开，所以计算BFC的高度浮动元素也会参与计算
