BFC 即 Block Formatting Contexts

(块级格式化上下文)，通俗一点来讲，可以把 BFC 理解为一个封闭的大箱子，箱子内部的元素无论如何翻江倒海，都不会影响到外部。

1.BFC的触发条件

1.根元素 html默认就是一个BFC

2.float的值不为none单纯的div不是BFC，如果添加了浮动就是BFC

3.overflow的值不为visible  单纯的div不是BFC，如果添加了overflow：hidden等就是BFC

4.display的值为     inline-block/ table-cell/ table-caption/ flex/ inline-flex

5.position的值为absolute或fixed

2.BFC的特性及应用

1.Box垂直方向的距离由margin决定，属于同一个BFC的两个相邻box的margin会发生重叠（应用：防止marin重叠）

2.BFC的区域不会与float

box发生重叠（应用：自适应两栏布局）

3.计算BFC的高度时，浮动元素也参与计算（应用：清除内部浮动）

4、BFC内部的Box会在垂直方向，一个接一个的放置。 5、每个元素的margin box的左边会与包含块border box的左边相接触（对于从左到右的格式化，否则相反），即使存在浮动也会如此。

6、BFC就是页面上的一个独立容器，容器里面的元素不会影响到外面的元素