什么是 BFC（块级格式化上下文）？如何创建 BFC？

BFC，即块级格式化上下文（Block Formatting Context），是CSS中的一个概念，用于描述页面中块级元素如何布局、定位和相互影响的一种机制。BFC是一个独立的渲染区域，具有一定的规则来决定其中元素的排布方式。

创建一个BFC主要有以下几种方法：

1：根元素（）自动创建BFC：根元素是默认的BFC，它包含了整个页面的内容。

2：使用overflow属性：将一个元素的overflow属性设置为除"visible"以外的值（例如"hidden"、“auto”、“scroll”）可以创建一个BFC。例如，可以给一个容器元素添加overflow: hidden;样式来创建一个BFC。

.bfc-container {
overflow: hidden;
}

3：使用float属性：给一个元素设置float属性为"left"或"right"也会创建一个BFC。浮动元素会形成一个独立的块级容器，不会与其他元素发生重叠。

.bfc-float {
float: left;
}

4：使用display属性：将一个元素的display属性设置为"inline-block"、“table-cell”、“table-caption”、“flex”、"inline-flex"等，也会创建一个BFC。

.bfc-display {