我们可能会遇到这样的一些问题，比如：子元素浮动，父元素高度塌陷；父元素跟随子元素一起移动等

这是我们可以通过触发BFC来解决这样的问题。

BFC为"块级格式化上下文"。它是一个独立的渲染区域，相当于是一个独立的环境。为一个元素里面创建这样的

环境，而这个元素本身是没有的，不会对周围的其他元素造成影响。

简单点就是：BFC就是⻚页⾯面上的⼀一个隔离的独⽴立容器，容器⾥里⾯面的⼦子元素不会影响到外⾯面的元素。反之也
如此

BFC布局的一些相关规则：

1、内部的BOX垂直一个一个放置；

2、垂直方向距离由margin决定，相邻两个margin会发生重叠

3、与包含块的左边相接触

4、不会与float重叠   等等

触发BFC：

1、根元素     body里面本身就是一个BFC环境
2、float属性不为none
3、position为absolute或fixed
4、display为inline-block, table-cell, table-caption, flex, inline-flex
5、overflow不为visible    //overflow：hidden 用的比较多

例如：