BFC 是什么

答题思路还是「是什么、怎么做、解决了什么问题、优点是、缺点是、怎么解决缺点」

是什么：

避免回答，直接把 BFC 翻译成中文「块级格式化上下文」即可，千万别解释。

怎么做：

背诵 BFC 触发条件，虽然 MDN 的这篇文章 列举了所有触发条件，但本押题告诉你只用背这几个就行了

• 浮动元素（元素的 float 不是 none）

• 绝对定位元素（元素的 position 为 absolute 或 fixed）

• 行内块 inline block 元素

• overflow 值不为 visible 的块元素

• 弹性元素（display为 flex 或 inline-flex元素的直接子元素）

解决了什么问题：

1. 清除浮动（为什么不用 .clearfix 呢？）

2. 防止 margin 合并

3. 某些古老的布局方式会用到（已过时）

优点：无。

缺点：有副作用。

怎么解决缺点：使用最新的 display: flow-root 来触发 BFC 就没有副作用了，但是很多人不知道。