BFC 是什么？

是什么

块级格式上下文

怎么做

• 浮动元素（float 值不为 none）
• 绝对定位元素（position 值为 absolute 或 fixed）
• 行内块元素（display 值为 inline-block）
• overflow 值不为 visible、clip 的块元素
• 弹性元素（display 值为 flex 或 inline-flex 元素的直接子元素），如果它们本身既不是flex、grid也不是table容器

解决了什么问题

1. 清除浮动。爸爸管儿子 用BFC包住浮动元素。

2. 防止 margin 合并。兄弟之间划清界限-
   如果左边兄弟浮动元素, 右边是div元素BFC: 红绿边框会重叠在一起: 兄弟都加上BFC之后:

   

优点

无。

缺点

有副作用

怎么解决缺点

使用最新的 display：flow-root 来触发BFC 就没有副作用了