【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 就没有副作用了。