BFC MDN

概念

块级格式化上下文（Block Formatting Context）是页面中的一块 CSS 渲染部分，里面的元素按一定的规则被渲染，BFC 里面的元素不会在布局上影响到外面的元素

触发条件

  • body 根元素
  • 浮动元素：float 除 none 以外的值（right, left）
  • 绝对定位元素：position（absolute，fixed）
  • display: inline-block, table-cells, flex
  • overflow 除了visible 以外的值（hidden, auto, scroll）

    应用

  1. 解决 margin 合并问题: 上 div 的 margin-bottom，和下 div 的margin-top 会重叠，解决办法是把其中一个 div 放入 BFC 中
  2. BFC 可包含浮动元素：在父元素上加 display: hidden，则里面的浮动元素就会被他包裹起来
  3. 阻止元素被浮动元素覆盖

参考资料
https://zhuanlan.zhihu.com/p/25321647
https://zhuanlan.zhihu.com/p/127187654