📚前端面试题速记
Q4
★ ★ ★ ★ ★

BFC 是什么？触发条件和应用场景？

⚡ 速记答案（30 秒）

BFC = 块级格式化上下文，一个独立布局环境。触发方式：float、position: absolute/fixed、display: inline-block/flow-root、overflow 非 visible。用途：清除浮动、阻止外边距折叠、两栏自适应布局。

📖 详细讲解

标准面试回答（推荐记住）

BFC 是块级格式化上下文，可以理解为一个独立的布局环境，里面的布局不会影响外面，外面也不会影响里面。触发 BFC 的方式有很多：float 不为 none、position 为 absolute 或 fixed、display 为 inline-block、table-cell 或 flow-root、overflow 不为 visible。BFC 的应用场景主要有三个：一是清除浮动，让父元素包裹浮动子元素；二是阻止外边距折叠；三是实现两栏自适应布局。

BFC 触发条件

  • float: left/right
  • position: absolute/fixed
  • display: inline-block/table-cell/flow-root
  • overflow: hidden/auto/scroll
  • 根元素 <html>

应用场景

1. 清除浮动（父元素高度塌陷）

.parent {
  overflow: hidden; /* 触发 BFC */
}

2. 阻止外边距折叠

.wrapper {
  overflow: hidden; /* 触发 BFC */
}

3. 两栏自适应布局

.left { float: left; width: 200px; }
.right { overflow: hidden; } /* BFC 不与 float 重叠 */

✅ 面试要点

  • •理解 BFC 是独立布局环境
  • •掌握常见触发方式
  • •知道三种应用场景

💻 代码示例

BFC 清除浮动
🎨 效果预览