BFC 与 IFC

BFC（Block Formatting Context）(块级格式化上下文) 和 IFC（Inline Formatting Context）(内联格式上下文) 是 CSS 中的重要概念，它们决定了元素的布局方式和与其他元素的交互行为。

---

1. BFC（Block Formatting Context）

定义：

• BFC 是一种格式化上下文，用于控制块级元素的布局。BFC 内部的子元素不会影响外部元素的布局，它是独立的。

特点：

1. 独立的布局环境：
   • BFC 内的元素的布局不受外部元素的影响，反之亦然。
2. 清除浮动（Clearfix）：
   • BFC 的容器会包裹住内部的浮动元素，从而解决高度塌陷问题。
3. 避免边距重叠：
   • BFC 的子元素之间的外边距不会与外部元素发生重叠。

---

如何触发 BFC

以下方式可以触发一个元素成为 BFC：

1. 使用 overflow 属性：

.bfc {
    overflow: hidden;
}

2. 使用 display: flow-root（推荐的现代方法）：

.bfc {
    display: flow-root;
}

3. 设置浮动（float）：

.bfc {
    float: left;
}

4. 设置绝对定位或固定定位：

.bfc {
    position: absolute;
}

5. 设置 display 为 inline-block、table 或 flex：

.bfc {
    display: inline-block; 
    display:flex;
    display:table;
}

---

BFC 的应用场景

1. 清除浮动：

当子元素使用 float 时，父元素的高度会塌陷。可以通过触发 BFC 来解决这一问题。

<style>
    .container {
        overflow: hidden; /* 触发 BFC */
    }
    .float {
        float: left;
        width: 100px;
        height: 100px;
        background: red;
    }
</style>
<div class="container">
    <div class="float"></div>
</div>

2. 防止边距重叠：

BFC 内部的元素与外部元素的边距不会重叠。

<style>
    .bfc {
        overflow: hidden; /* 触发 BFC */
        margin-top: 20px;
    }
    .element {
        margin-top: 20px;
    }
</style>
<div class="bfc">
    <div class="element">No margin collapsing here</div>
</div>

---

2. IFC（Inline Formatting Context）

定义：
IFC 是一种格式化上下文，用于控制行内元素的布局。IFC 的布局规则决定了行内元素如何排列和换行。

特点：

1. 行内水平排列：
   • IFC 内部的元素按照从左到右（或从右到左，取决于 direction）的顺序水平排列。
2. 内容溢出换行：
   • 如果 IFC 的内容宽度超出容器，则会自动换行。
3. 不允许高度塌陷：
   • 行内元素的高度由内容决定，无法通过直接设置宽高来调整。

---

如何触发 IFC

1. 默认行为：

• 当元素包含纯行内内容（如文字、<span>、``）时，浏览器默认会使用 IFC。

2. 设置 display: inline：

• 强制触发行内布局：

.ifc {
    display: inline;
}

---

IFC 的应用场景

1. 水平对齐图文内容：

使用 IFC 控制行内图片和文字的对齐方式。

<style>
    .ifc {
        display: inline;
    }
    .text {
        vertical-align: middle;
    }
    .image {
        vertical-align: middle;
        width: 20px;
        height: 20px;
    }
</style>
<div>
    <span class="ifc text">Hello</span>
    
</div>

2. 行内内容换行：

当文字或行内内容需要自动换行时，IFC 会自动处理溢出换行。

---

BFC 和 IFC 的对比

特性	BFC	IFC
作用范围	块级元素布局	行内元素布局
布局方向	从上到下的块状布局	从左到右的行内布局
触发方式	通过设置 overflow, display, float 等触发	默认用于行内元素或 display: inline
边距重叠	不发生边距重叠	行内元素间不会产生边距
清除浮动	可以清除浮动	无法清除浮动
内容溢出	内容溢出时不会换行	内容溢出时会换行

---

总结

• BFC 适合用于块级布局，主要解决清除浮动和边距重叠问题。
• IFC 适合用于行内元素的水平排列和对齐，如图文混排。
• 通过设置 CSS 属性（如 display、overflow、float）可以轻松触发 BFC 或 IFC。