BFC（Block Formatting Context）是什么？

BFC是什么：

前端BFC（块级格式化上下文）是CSS中的一种布局模型，用于控制块级元素在页面中的布局和定位。BFC的概念非常重要，对于理解和解决一些布局问题非常有帮助。

BFC是一种独立的渲染环境，其中的元素在布局上相互隔离，不会影响到外部的元素。

BFC具有以下特性：

• BFC中的元素在垂直方向上以块级盒子的形式排列。
• BFC中的块级元素的左外边距与包含块的左边界相接触，右外边距与包含块的右边界相接触，即不会与其他块级元素发生重叠。
• BFC中的元素在垂直方向上的间距由边距（margin）决定，不会发生折叠。
• BFC中的区域不会被浮动元素所覆盖，即计算BFC的高度时会考虑浮动元素的位置。

BFC常见的应用场景包括：

1. 清除浮动：通过触发包含浮动元素的父元素的BFC属性，使得父元素能够正确地包裹浮动元素，防止父元素塌陷。

在上述代码中，通过给父元素（class为"parent"）设置`overflow: hidden;`触发了BFC。这样父元素就能正确地包裹内部的浮动元素（class为"child"），防止父元素塌陷。

1. 创建自适应的多栏布局：通过在多栏容器上创建BFC，可以实现多栏等高布局，避免出现高度不一致的问题。

上述代码中，通过给容器（class为"container"）设置overflow: hidden;触发了BFC。容器内部包含了三个等宽的列（class为"column"），每个列占据容器的1/3宽度，并且高度一致，这样就实现了多栏等高布局。

1. 阻止边距重叠：在BFC中的相邻块级元素之间的边距不会重叠，可以用于解决边距重叠问题。

在上述代码中，通过给item2（class为"itemBfc"）设置overflow: hidden;触发了BFC。由于BFC的作用，这两个项的边距不会重叠，确保它们之间有一个40px的间距。