css bfc

/* 示例代码：创建 BFC (Block Formatting Context) */

/* 方法1：通过 float 创建 BFC */
.bfc-float {
  float: left;
}

/* 方法2：通过 position 绝对定位创建 BFC */
.bfc-position {
  position: absolute;
}

/* 方法3：通过 overflow 创建 BFC */
.bfc-overflow {
  overflow: hidden; /* 或 auto */
}

/* 方法4：通过 display 创建 BFC */
.bfc-display {
  display: inline-block; /* 或 table-cell, flex, grid 等 */
}

/* 解释说明：
BFC (Block Formatting Context) 是 CSS 中的一个独立的布局环境，它内部的元素布局不会影响外部的元素。
常见的创建 BFC 的方式有：
1. float 设置为 left 或 right；
2. position 设置为 absolute 或 fixed；
3. overflow 设置为非 visible（如 hidden、auto）；
4. display 设置为 inline-block、table-cell、flex、grid 等。

BFC 可以解决一些常见的布局问题，例如清除浮动、防止 margin 重叠等。 */