【CSS】BFC 是什么？

是什么

块级格式化上下文（一句话完事）。

怎么做

MDN BFC 触发条件。常用我们只需要知道下面五个：

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

2. 行内块元素（inline block）

3. overflow 值不为 visible 的块元素

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

解决了什么问题

常用项目中主要解决了下面两个问题:

1. 防止 margin 合并（竖直方向上两个块元素会发生外边距合并，这时候只要某个元素触发 BFC 就不会合并了，还是比较实用的）

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

优点

就是单纯的解决了上面的一些问题。

缺点

有副作用，毕竟设置了新的 css 属性。

怎么解决缺点

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