BFC的应用

BFC（Block Formatting Context，块级格式化上下文）是 CSS 中的一个核心概念，用于控制页面元素的布局规则。它通过创建一个独立的渲染区域，隔离内部元素与外部元素的相互影响，从而解决一些常见的布局问题。

BFC 是什么？

BFC 容器是页面中一个独立的布局环境，其内部的元素按照特定规则排列，不受外部布局的影响。BFC 内的元素不会与外部元素发生布局冲突（如边距重叠、浮动元素覆盖等）。

如何触发 BFC？

为一个元素设置以下 CSS 属性之一，即可将其变为 BFC 容器：

1. overflow: hidden、auto、scroll（非 visible）
2. display: inline-block、flex、grid、table-cell 等
3. float: left 或 float: right（非 none）
4. position: absolute 或 position: fixed
5. contain: layout（现代属性）

BFC 的作用

1. 防止外边距折叠（Margin Collapse）
   普通流中相邻元素的垂直外边距会合并，但 BFC 内部和外部的边距不会合并。

   <div class="parent">
     <div class="child"></div>
   </div>
   

   .parent {
     overflow: hidden; /* 触发 BFC */
   }
   .child {
     margin: 20px;
   }
   

2. 包含浮动元素
   父容器高度塌陷时，触发 BFC 可使父容器包裹浮动子元素。

   .parent {
     overflow: hidden; /* 触发 BFC */
   }
   .float-child {
     float: left;
   }
   

3. 阻止元素被浮动覆盖
   BFC 容器不会与浮动元素重叠，常用于实现自适应两栏布局。

   .left {
     float: left;
     width: 200px;
   }
   .right {
     overflow: hidden; /* 触发 BFC，避免被左侧浮动覆盖 */
   }
   

BFC 的特性

• BFC 内部的块级元素会垂直排列。
• BFC 的区域不会与浮动元素重叠。
• BFC 内外的布局相互独立。

应用场景

• 解决父元素高度塌陷（清除浮动）。
• 避免相邻元素边距合并。
• 实现复杂布局（如自适应两栏）。