被忽略的BFC

什么是BFC
BFC（Block formatting context）译为“格式快上下文”，是一个独立渲染区域，规定了内部的子元素如何布局，并且与这个区域外部的关系。

什么情况下会产生BFC

1. 根元素（注意：这里必须手动设置，默认不触发BFC）
2. float属性不为none
3. position为absolute或fixed
4. display为inline-block、table-cell、table-caption、flex、inline-flex

5. overflow不为visible（除非该值已经被传播到视口）

   BFC布局规则是怎样的？

6. 内部的Box会在垂直方向，一个接一个地放置。

7. Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠
8. 每个元素的margin box的左边，与包含快border box 的左边相接触（对于从左往右的格式化，否则相反）。即使存在浮动也是如此。
9. BFC的区域不会与float box重叠。
10. BFC就是页面上一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。
11. 计算BFC的高度时，浮动元素也参与计算

并不是只有块元素才会产生BFC，任何元素只要符合条件即可生产BFC