BFC是Web页面中盒模型的一种属性或者说是一种状态，这种状态默认是没有的，需要一些属性才可以触发这个盒模型的BFC状态，继而产生一些其他的效果。

1.什么情况下可能会需要触发BFC？

1.1    防止margin重叠

代码

bigBox没有设置margin-top也被顶了下去

1.2    清除内部浮动

代码

子元素因为浮动导致父元素高度塌陷

1.3    自适应两（多）栏布局

代码

左边浮动右边自适应却占满了整个宽度

1.4    防止字体环绕

这个我也没有理解，写不出来

2.怎么样才可以触发BFC？

2.1    float的值不为none

2.2    overflow的值不为visible

2.3    display的值为inline-block、table-cell、flex、table-caption或者inline-flex

2.4    position的值不是static或者relative

3.BFC触发后会有什么效果？

1.1    内部的Box会在垂直方向上一个接一个的放置

1.2    垂直方向上的距离由margin决定

1.3    bfc的区域不会与float的元素区域重叠

1.4    计算bfc的高度时，浮动元素也参与计算

1.5    bfc就是页面上的一个独立容器，容器里面的子元素不会影响外面元素