块级格式化上下文(BFC)与布局上下文原理

格式化上下文是CSS布局的核心概念，决定元素如何排列以及与其他元素如何交互。

格式化上下文概述

CSS定义了多种格式化上下文：

BFC核心特性

什么是BFC

块级格式化上下文是一个独立的渲染区域，内部元素与外部隔离。

┌─────────────────────────────────┐
│           BFC容器               │
│  ┌───────────────────────────┐  │
│  │ 子元素布局不影响外部      │  │
│  │ 外部元素布局不影响内部    │  │
│  └───────────────────────────┘  │
└─────────────────────────────────┘

BFC五大特性

1. 内部块级元素垂直排列

<div class="bfc">
  <div class="block">块1</div>
  <div class="block">块2</div>
</div>

.bfc {
  overflow: hidden; /* 触发BFC */
}
.block {
  display: block;
  margin: 10px 0;
}

2. BFC区域不与浮动元素重叠

<div class="float">浮动元素</div>
<div class="bfc">BFC容器</div>

.float {
  float: left;
  width: 100px;
  height: 100px;
  background: #ccc;
}

.bfc {
  overflow: hidden; /* 触发BFC */
  background: #eee;
}

┌────────────┬──────────────────┐
│  浮动元素  │    BFC容器       │
│            │   (不重叠)       │
└────────────┴──────────────────┘

3. BFC计算高度时包含浮动子元素

<div class="parent">
  <div class="float-child">浮动子元素</div>
</div>

/* 问题：父元素高度塌陷 */
.parent {
  border: 2px solid red;
  /* 不触发BFC，高度为0 */
}

.float-child {
  float: left;
  height: 100px;
}

/* 解决：触发BFC */
.parent-bfc {
  overflow: hidden; /* 或 display: flow-root */
  border: 2px solid green;
}

4. BFC内外部边距不重叠

<div class="outer">
  <div class="inner">内部元素</div>
</div>

.outer {
  overflow: hidden; /* 触发BFC */
  margin-top: 20px;
}

.inner {
  margin-top: 30px; /* 不会与父元素margin重叠 */
}

5. 同一BFC内相邻块级元素垂直边距重叠

<div class="box">块1 margin-bottom: 20px</div>
<div class="box">块2 margin-top: 30px</div>

.box:first-child {
  margin-bottom: 20px;
}

.box:last-child {
  margin-top: 30px;
  /* 实际间距：max(20px, 30px) = 30px，不是50px */
}

BFC触发条件

推荐的BFC触发方式

/* 方法1：overflow:hidden */
.bfc {
  overflow: hidden;
}
/* 缺点：可能裁剪溢出内容 */

/* 方法2：display:flow-root（推荐） */
.bfc {
  display: flow-root;
}
/* 优点：语义明确，无副作用 */

BFC应用场景

1. 清除浮动

<div class="container">
  <div class="float-item">浮动元素</div>
  <div class="float-item">浮动元素</div>
</div>

/* 问题：容器高度为0 */
.container {
  border: 1px solid #ccc;
}

.float-item {
  float: left;
  width: 100px;
  height: 100px;
}

/* 解决：触发BFC */
.container {
  display: flow-root; /* 或 overflow: hidden */
}

2. 阻止边距重叠

<div class="sibling1">元素1</div>
<div class="wrapper">
  <div class="sibling2">元素2</div>
</div>

.sibling1 {
  margin-bottom: 20px;
}

.sibling2 {
  margin-top: 30px;
}

/* 问题：边距重叠，实际间距30px */

/* 解决：包装元素触发BFC */
.wrapper {
  overflow: hidden; /* 阻止与外部边距重叠 */
}
/* 现在间距：20px + 30px = 50px */

3. 自适应两栏布局

<div class="sidebar">侧边栏</div>
<div class="main">主内容</div>

.sidebar {
  float: left;
  width: 200px;
  height: 100vh;
  background: #eee;
}

.main {
  overflow: hidden; /* 触发BFC，不与浮动元素重叠 */
  /* 自动适应剩余宽度 */
  height: 100vh;
  background: #ddd;
}

4. 防止文字环绕浮动元素

<div class="float-box">浮动</div>
<p class="text">文字内容...</p>

.float-box {
  float: left;
  width: 100px;
  height: 100px;
}

/* 问题：文字环绕浮动元素 */

/* 解决：文字容器触发BFC */
.text {
  overflow: hidden; /* 或 display: flow-root */
}

其他格式化上下文

IFC（行内格式化上下文）

行内元素水平排列，行高由line-height决定。

<div class="ifc-container">
  <span>行内元素1</span>
  <span>行内元素2</span>
  <span>行内元素3</span>
</div>

.ifc-container {
  /* 块级容器创建IFC */
  line-height: 1.5;
}

span {
  /* 行内元素参与IFC */
  vertical-align: baseline;
}

特点：

• 水平排列
• 垂直对齐由vertical-align控制
• 行高由line-height和vertical-align共同决定

FFC（Flex格式化上下文）

Flex容器内部创建FFC。

.flex-container {
  display: flex; /* 创建FFC */
}

.flex-container {
  display: inline-flex; /* 创建FFC */
}

FFC特点：

• 子项成为flex item
• 不受float影响
• 不适用vertical-align
• 不适用column-span

GFC（Grid格式化上下文）

Grid容器内部创建GFC。

.grid-container {
  display: grid; /* 创建GFC */
}

.grid-container {
  display: inline-grid; /* 创建GFC */
}

GFC特点：

• 子项成为grid item
• 二维布局
• 支持网格区域命名

格式化上下文对比

层叠上下文与BFC关系

BFC和层叠上下文是独立概念，但可能同时触发。

/* 同时触发BFC和层叠上下文 */
.both {
  position: relative;
  z-index: 0; /* 层叠上下文 */
  overflow: hidden; /* BFC */
}

/* 只触发BFC */
.bfc-only {
  display: flow-root; /* 只BFC */
}

/* 只触发层叠上下文 */
.stacking-only {
  position: relative;
  z-index: 1; /* 只层叠上下文 */
}

要点总结

1. BFC是独立渲染区域，内外布局互不影响
2. BFC五大特性：垂直排列、不与浮动重叠、包含浮动子元素、边距隔离
3. 推荐使用display: flow-root触发BFC
4. 应用场景：清除浮动、阻止边距重叠、自适应布局
5. IFC/FFC/GFC各有特点，根据布局需求选择