BFC

block formatting context 块级格式化上下文。形成一个独立的渲染区域，让处于 BFC 内部的元素与外部的元素相互隔离，使内外元素的布局不会相互影响

介绍下BFC及其应用

触发条件（任意一条）：
- 浮动元素----float的值不为none
- 块级元素----display的值为table-cell，table-caption或inline-block
- overflow的值不为visible
- 绝对定位元素---position的值ablsolute或fixed
- flex元素
- IE中，Layout，可通过zoom: 1触发
与普通文档流的区别：
- 普通文档流：
  - 浮动的元素不会被父级计算高度
  - 非浮动元素会覆盖浮动元素的位置
  - margin会传递给父级元素
  - 两个相邻元素的上下margin会重叠
- BFC 布局规则：
  - 不与浮动元素重叠
    - 浮动的元素会被父级计算高度（父级元素触发了BFC），解决浮动元素父元素高度坍塌的问题
    - 非浮动元素不会覆盖浮动元素的位置（非浮动元素触发了BFC）
  - 为防止 A、B 的 margin 重叠给 A 添加一个包裹器 wrap，让 wrap 触发 BFC，从而让 A\B 的 margin 同时起作用
    - margin不会传递给父级（父级触发BFC）
    - 属于同一个BFC的两个相邻元素上下margin会重叠
    - 两个 BFC 之间的 margin 也会重叠
开发中的应用：
- 阻止margin重叠
- 可以包含浮动元素 —— 清除内部浮动(清除浮动的原理是两个 div都位于同一个 BFC 区域之中)
- 自适应两栏布局：右侧浮动w200，左侧（清除浮动）100%-200px
- 可以阻止元素被浮动元素覆盖

各种FC

BFC ​