css中bfc有什么用

CSS中的BFC，即“块级格式上下文”，是一种用于对页面布局进行控制的重要概念。BFC在 CSS 规范中被定义为一块独立的容器，容器内的子元素按照一定的规则进行布局。

通过使用BFC，我们可以实现各种功能，例如清除浮动、防止 margin 重叠等。

BFC 的主要作用有：

1. 清除浮动
当一个元素浮动时，它会脱离文档流并且不会占用父元素的空间，导致父元素无法应用背景色、边框等样式，而使用BFC 可以让浮动元素和父元素在同一层级内，从而解决此问题。

2. 防止 margin 重叠
当两个相邻元素的 margin 值相遇时，会产生“margin 重叠”的现象，导致页面布局出现问题。使用BFC可以避免 margin 重叠，使得相邻元素的 margin 值被计算为独立值。

3. 自适应两栏布局
通过创建 BFC 容器，我们可以实现自适应两栏布局，即让左侧元素自适应宽度，右侧元素固定宽度，从而实现分栏效果。

通过以上三项功能，我们可以看出在实际开发中 BFC 的应用非常广泛。BFC 可以通过多种方式生成，例如设置 float、display: inline-block、position: absolute 或 overflow: hidden 等。如果我们想实现浮动清除、防止 margin 重叠或自适应两栏布局等功能，BFC 是一个十分有用的工具。