BFC是什么？BFC能用来干什么？怎么才能触发BFC？

BFC（块级格式化上下文，Block Formatting Context）是 CSS 中的一个概念，它是一个独立的渲染区域，具有一套渲染规则，规定了内部块级盒子如何布局，并且与外部元素互相隔离。

BFC 的特性：

1. BFC的子元素不会对外面的元素产生影响
2. margin塌陷，非bfc的子元素定义margin-top，父元素也会跟着子元素margin-top
3. 高度坍塌，子元素定义了高度，但是设置了float:left;父元素没定义高度，父元素没有高度。解决：父元素也定义为bfc。

BFC 的应用：

1. 清除浮动：通过触发父元素的 BFC，可以清除浮动，防止父元素的高度塌陷。
2. 防止外边距折叠：在需要防止外边距折叠的地方触发 BFC。
3. 自适应两栏布局：通过触发包裹浮动元素的容器的 BFC，可以防止浮动元素溢出到容器外。

触发 BFC 的方式：

1. 根元素（html） ：根元素默认就是一个 BFC。
2. float 不为 none：元素的 float 属性值不为 none。
3. overflow 不为 visible：元素的 overflow 属性值不为 visible。
4. position 为 absolute 或 fixed：元素的 position 属性值为 absolute 或 fixed。
5. display 为 inline-block、table-cell、table-caption、flex、inline-flex：元素的 display 属性值为 inline-block、table-cell、table-caption、flex、inline-flex。只要不是block, inline,none。
6. display 为 flow-root：元素的 display 属性值为 flow-root。

以上触发 BFC 的方式并不是详尽无遗的，不同属性和组合可能会有一些差异。触发 BFC 的目的通常是为了解决一些布局上的问题，如清除浮动、防止外边距折叠等。