BFC：
块级格式化上下文，是一种属性，display属性为block, list-item ,table的元素，会产生BFC。
如何产生bfc：
1）根元素
2）float属性不为none
3）position不为static和relative
4）overflow不为visible
5）display为inline-block, table-cell, table-caption, flex, inline-flex
BFC原理：
1）内部的Box会在垂直方向，一个接一个地放置。
2）Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠
3）每个元素的margin box的左边， 与包含块border box的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此。
4）BFC的区域不会与float box重叠。
5）BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。
6）计算BFC的高度时，浮动元素也参与计算
BFC作用：
1）防止外边距重叠。
bfc导致的属于同一个bfc中的子元素的margin重叠(Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠)
我们可以在div外面包裹一层容器，并触发该容器生成一个BFC。那么两个div便不属于同一个BFC，就不会发生margin重叠了。
2）清除浮动的影响
块级子元素浮动，如果块级父元素没有设置高度，其会有高度塌陷的情况发生。
原因：子元素浮动后，均开启了BFC，父元素不会被子元素撑开。
解决方法：由第六条原理得，计算BFC的高度时，浮动元素也参与计算。所以只要将父容器设置为bfc
就可以把子元素包含进去：这个容器将包含浮动的子元素，它的高度将扩展到可以包含它的
子元素，在这个BFC，这些元素将会回到页面的常规文档流。
3）防止文字环绕
原文：https://www.cnblogs.com/meinvfqf/p/14607295.html