深入BFC/IFC/GFC/FFC：不同格式化上下文的布局规则与相互作用机制 大家好，今天我们来深入探讨CSS中至关重要的概念——格式化上下文（Formatting Context）。理解格式化上下文是掌握CSS布局的关键，它可以帮助我们更好地控制元素在页面中的呈现方式，避免一些常见的布局问题。我们将详细分析BFC、IFC、GFC和FFC这四种主要的格式化上下文，并探讨它们的布局规则以及它们之间的相互作用。 1. 什么是格式化上下文？ 格式化上下文是页面中的一个渲染区域，它定义了内部元素的布局方式。简单来说，它就像一个独立的盒子，盒子内部的元素按照一定的规则排列，而盒子内部的布局不会影响到盒子外部的元素。每个元素都属于一个格式化上下文，而根元素（<html>）总是会创建一个初始的格式化上下文。 格式化上下文的主要作用包括： 隔离性： 格式化上下文内部的布局与外部的布局隔离，避免相互干扰。 定位： 浮动元素只会在其所属的格式化上下文中影响其他元素。 包含： 格式化上下文可以包含浮动元素，防止父元素高度塌陷。 防止 Margin Collapse： 在某些情况下，格式化上下文可 …