BFC (Block Formatting Context, block-level formatting context) is a very important concept in CSS layout. Understanding it can help you solve many classic problems: such as Float collapse, margin overlap, clear float, internal adaptive layout Wait.

Let’s explain it clearly through the system👇

1. What is BFC?

BFC (Block Formatting Context) is an independent rendering area, and the layout of internal elements will not affect external elements.

Simply put: Elements in BFC will be "self-contained" and their layout rules are independent of the external world.

2. Conditions for triggering BFC (very important ⚡)

An element creates a BFC if any of the following conditions are true:

Trigger condition	Example
Root element (<html>)	Exists by default
float value is not none	float: left; / float: right;
position value is absolute or fixed	position: absolute;
display is flow-root, inline-block, table-cell, or table-caption	display: flow-root;
A block box has overflow other than visible and clip	overflow: hidden; / auto; / scroll;

Flex and Grid containers establish their own formatting contexts. They share some isolation behavior with a BFC but are different contexts. To create only a BFC, use display: flow-root without introducing clipping. ✅ Common triggers:

.container {
  overflow: hidden; /* 最常用 */
}

3. Layout characteristics of BFC (remember these four items)

Features	Description
① Internal boxes are arranged vertically	Arranged from top to bottom like normal document flow
② The BFC area will not overlap with floating elements	It will automatically wrap around the outer boundary of floating elements
③ Include floating elements when calculating height	Can "wrap" floating child elements (used to clear floats)
④ The margin will not overlap with external elements	Solve the problem of margin merging

4. Typical application scenarios of BFC

✅ Scenario 1: Clear floats (solve the height collapse of the parent container)

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

.parent {
  /* 触发 BFC，使父元素包含浮动子元素 */
  overflow: hidden;
}
.child {
  float: left;
  width: 100px;
  height: 100px;
  background: #42b983;
}

📌 Principle: After the parent element forms a BFC, the floating child elements will be calculated into its own height.

✅ Scenario 2: Avoid margin overlap

<div class="box1"></div>
<div class="box2"></div>

.box1 {
  margin-bottom: 20px;
  background: #eee;
}
.box2 {
  margin-top: 20px;
  background: #ccc;
}

👉 These two margins will Overlap is 20px 。 Solution:

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

📌 Principle: Margins between different BFCs do not overlap.

✅ Scenario 3: Prevent floating elements from covering text

<div class="float-box"></div>
<p>这段文字可能会被浮动元素覆盖</p>

.float-box {
  float: left;
  width: 100px;
  height: 100px;
  background: skyblue;
}
p {
  display: flow-root; /* 建立独立 BFC，避免内容环绕外部浮动 */
}

5. Visual understanding: BFC is like an “independent little world”

┌───────────────────────────────┐
│ 外层 BFC（document）         │
│   ┌───────────────────────┐  │
│   │ 内层 BFC（overflow） │  │ ← 内外互不干扰
│   └───────────────────────┘  │
└───────────────────────────────┘

• Internal floating, margin and other rules only take effect in the current BFC;
• The outside will not be affected.

6. Summary of common interview questions

Q1: What is BFC?What does it do? A: BFC is an independent layout environment, and the internal layout will not affect the outside. Commonly used for:

• clear float;
• Prevent margins from overlapping;
• Prevent text from floating around;
• Create independent layout areas.

Q2: How to trigger BFC?

• Block boxes with overflow other than visible and clip;
• float；
• position: absolute / fixed；
• display: flow-root, display: inline-block, etc.; Flex/Grid establish their own formatting contexts.

Q3: What is the difference between BFC and IFC (inline formatting context)?

• BFC works on block-level boxes and vertical layout;
• IFC works on inline content, arranged horizontally (such as text and inline elements).

7. Structured summary (mind map structure)

BFC（块级格式化上下文）
 ├── 定义：独立布局环境
 ├── 触发条件
 │   ├── float ≠ none
 │   ├── position = absolute/fixed
 │   ├── overflow ≠ visible / clip
 │   ├── display = flow-root / inline-block / table-cell
 ├── 特性
 │   ├── 内部盒子垂直排列
 │   ├── 不与浮动重叠
 │   ├── 包含浮动子元素
 │   └── 阻止外边距重叠
 └── 应用场景
     ├── 清除浮动（高度塌陷）
     ├── 阻止 margin 重叠
     ├── 防止文字被浮动覆盖
     └── 创建独立布局区域

After understanding BFC (block-level formatting context), it is a very natural step to learn IFC (Inline Formatting Context). The two complement each other and are the basic core of the CSS layout system.

1. What is IFC?

IFC (inline formatting context) is a layout context participated by inline-level elements. In IFC, elements are arranged horizontally one behind the other like text.

💬 Simple understanding:

Vertical arrangement between "blocks" of BFC tubes, IFC manages the horizontal arrangement between "words" and "inline elements".

2. Which elements will generate IFC?

As long as the element is inside No block-level elements , but instead consists entirely of inline-level content, then it creates an IFC.

Typical trigger scenarios:

<p>
  <span>这是</span>
  <em>行内</em>
  <strong>上下文</strong>
</p>

The <p> elements here are all inline elements inside → so it creates an IFC.

3. Layout rules of IFC

In an inline formatting context (IFC):

Rules	Description
① Inline boxes (inline boxes) are arranged from left to right	Automatically wrap when the width of the container is exceeded
② The line height (line box) is determined by line-height	Control line spacing and vertical alignment of text
③ Each line forms a "line box"	Multi-line text has multiple line boxes
④ The vertical alignment of elements is controlled by vertical-align	Baseline, top, bottom and other alignment methods
⑤ Spaces between inline elements will also be rendered	Spaces in HTML will appear as spacing

4. Visual understanding of IFC (line box structure)

+------------------------------------------------+
| line box ①  → [inline box][inline box][inline] |
+------------------------------------------------+
| line box ②  → [inline box][inline box]         |
+------------------------------------------------+

• Each line of text corresponds to a line box;
• Each inline element (text, <span>, <img>, etc.) occupies its own inline box;
• The height of the line box depends on the maximum height of the inline element and line-height.

5. Performance of common attributes of IFC

🔸 vertical-align

for control Vertical alignment between inline boxes 。

img {
  vertical-align: middle;
}

Values include:

• baseline (default, baseline aligned)
• top、bottom
• middle
• text-top、text-bottom

📌 Used to better align text and images on the same line.

🔸 line-height

Controls the line height (the height of the line box), often used to vertically center inline elements.

.button {
  line-height: 40px;  /* 使文字垂直居中 */
  height: 40px;
}

6. Common application scenarios of IFC

Application scenarios	Examples
✅ Vertical alignment of text and images	Mixed arrangement of images and text, icon alignment
✅ Single line text vertically centered	Use line-height to achieve
✅ Multi-line text line break control	white-space / word-break
✅ Inline buttons and labels are displayed side by side	Adaptive arrangement of inline elements

Example: Vertically align inline text with icons

<span class="icon-text">
  <img src="icon.png" alt="">
  图标文字
</span>

.icon-text img {
  vertical-align: middle;
  width: 16px;
  height: 16px;
}

📌 The image and text will be vertically centered on the same line.

7. Comparison summary between IFC and BFC

Contrast items	BFC (block-level formatting context)	IFC (inline formatting context)
Target objects	Block-level elements	Inline elements
Layout direction	Vertical direction (top-down)	Horizontal direction (left-to-right)
Whether to wrap lines	Block level occupies one line	Automatically wrap lines within a line
Typical triggers	div, p, section	span, a, em, img
Height calculation	Contains child elements and floats	Determined by maximum row height
Frequently Asked Questions	Margin merging, floating collapse	baseline, vertical-align alignment issues

8. Interview Frequently Asked Questions

Q1: What is IFC? IFC is an inline formatting context in which inline elements (inline-level boxes) are arranged horizontally, with each line forming a line box.

Q2: What is the difference between IFC and BFC?

• BFC: vertical layout of block-level elements;
• IFC: horizontal layout of inline elements;
• The two exist independently, but can be nested.

Q3: How to vertically center inline content?

• Single line text can be used with line-height;
• You can use vertical-align: middle to mix images and text.

🧭 9. Summary of mind map structure

IFC（行内格式化上下文）
 ├── 定义：行内元素的水平布局环境
 ├── 触发条件：容器内全是行内级内容
 ├── 布局规则
 │   ├── 从左到右排列
 │   ├── 溢出自动换行
 │   ├── 行高由 line-height 决定
 │   ├── vertical-align 控制垂直对齐
 ├── 常见属性
 │   ├── line-height
 │   ├── vertical-align
 │   ├── white-space
 │   └── word-break
 ├── 应用场景
 │   ├── 文本垂直居中
 │   ├── 图文对齐
 │   ├── 行内按钮布局
 │   └── 多行换行控制
 └── 与 BFC 对比
     ├── 水平 vs 垂直
     ├── 行内 vs 块级
     ├── line-box vs box model