Skip to content
4.1
4.2
5.1
5.3
5.4
5.5
脱离标准流——从 LayoutBox 树到 BFC
1. 概述
浏览器通过标准流（normal flow）为块级和内联元素分配空间。float、position: absolute 以及 position: fixed 会改变这一默认行为，使元素脱离标准流，但三者在布局引擎中的内部处理路径并不相同。脱离标准流不意味着元素从渲染树中消失——它们仍存在于布局树（LayoutBox tree）内，只是不再参与标准流中的空间计算。
要区分这些差异，需要同时考察 BFC（块格式化上下文）与布局树的记录方式。
2. 基本概念
2.1 标准流元素与脱离流元素
CSS 规范将元素分为两类：
- In-flow 元素：处于标准流中。块级盒子按垂直方向依次排列，内联元素（包括文本）在行框内依次排列。它们参与父容器 BFC 的高度计算，相互推开。
- Out-of-flow 元素：从标准流中移除。不参与父容器的高度计算，其他 in-flow 兄弟元素在布局时忽略它们的存在。
下表概括了三种脱离标准流的方式以及它们在布局树中的身份与影响范围：
| 方式 | 在 LayoutBox 树中的记录 | 影响兄弟元素布局 | 影响父容器高度 |
|---|---|---|---|
float: left/right | overhanging float | 行框环绕（仅文本和内联元素） | 否（除非父级为 BFC） |
position: absolute | positioned object | 否 | 否 |
position: fixed | positioned object | 否 | 否 |
2.2 BFC（块格式化上下文）
BFC 是 CSS 视觉格式化模型中的一个独立区域。一个元素如果创建了新的 BFC，其内部的盒子布局与外部相互隔离：外部的浮动元素不会侵入 BFC 内部，内部的浮动元素也会被 BFC 限制在内部，并且 BFC 在计算高度时会包含其内部的浮动元素。
常见的 BFC 触发条件：
- 根元素（
<html>） float不为noneposition为absolute或fixeddisplay为inline-block、table-cell、table-caption、flex、grid、flow-root等overflow不为visible（例如auto、hidden）contain为layout、content或strict
BFC 在脱离流场景中的主要角色：
float元素本身创建了 BFC，但它们脱离了父级的标准流，父级容器如果未形成 BFC，其高度不会包含浮动元素（高度塌陷）。若父级容器触发 BFC，则它会将浮动的子元素包裹在内。position: absolute与position: fixed的元素脱离流，且父级 BFC 在计算高度时直接忽略它们——无论父级是否触发 BFC，这些定位元素都不会被计入高度。
2.3 布局树中的记录
在 Blink（Chromium）的布局阶段，元素被映射为 LayoutBox 对象并构建布局树。对于脱离标准流的元素：
float元素在LayoutBlockFlow::AddOverhangingFloats中被标记为 overhanging（悬挂浮动）。它们不累加到父容器的高度中，但后续行框在布局时需要已知它们的位置以实现文字环绕。position: absolute和position: fixed的元素作为 positioned object 记录在父级或包含块的附加列表中，在标准流布局完成之后再进行定位计算。
3. 工作原理
布局过程简化：
- 构建 LayoutBox 树。
- 沿树自上而下计算 in-flow 元素的尺寸与位置（常规流布局）。
- 处理浮动元素：确定它们的位置以及它们对行框的影响。
- 处理绝对/固定定位元素：根据包含块计算其最终位置。
包含块（containing block）是定位计算的关键。规则如下：
- 对于
position: absolute，包含块是最近的position不为static的祖先元素的 padding-box；若不存在，则为初始包含块（ICB，通常等同于视口）。 - 对于
position: fixed，包含块固定为视口——但若某个祖先元素设置了transform、filter、perspective等属性，该祖先会创建新的包含块，此时fixed元素会以该祖先为参照，这解释了开发中常遇到的 “fixed 失效” 现象。
4. 基本用法
4.1 float 与 clear
float: left | right | none：使元素浮动到包含块左侧或右侧，文本和内联元素环绕它。浮动元素会脱离标准流。clear: left | right | both | none：应用于块级元素，阻止其前面出现的浮动元素对自身的环绕影响。设置clear的元素会移到相关浮动元素的下方。
4.2 position
position: relative：不脱离标准流。元素保留它在标准流中的原始空间，top/right/bottom/left的偏移量仅为视觉上的平移。position: absolute：完全脱离标准流。元素相对其包含块定位。position: fixed：与absolute共用相同的定位计算路径，但默认包含块为视口。
4.3 偏移属性
top、right、bottom、left 仅在 position 不为 static 时生效。它们定义了元素相对于包含块边界的偏移距离。
5. 示例
5.1 float：图文混排与行框环绕
html
<style>
.float-figure {
float: left;
width: 120px;
height: 120px;
margin-right: 12px;
background: #e0e0e0;
text-align: center;
line-height: 120px;
}
.content {
width: 400px;
border: 1px solid #aaa;
padding: 8px;
}
</style>
<div class="content">
<div class="float-figure">图片</div>
<p>这段文字会环绕左侧的图片排列。图片本身不占据标准流的高度，所以如果父容器未触发 BFC，它的高度不会撑开父容器。</p>
<p>第二段文本同样受到环绕影响，直到空间足够。</p>
</div>行为说明：图片浮动后，它脱离了标准流，但后续的行框（line boxes）会缩短宽度以给浮动元素留出空间，因此文字环绕图片。块级元素（比如 p）的背景和边框并不会因浮动而缩短——它们仍在标准流中占据整行宽度，只是内部的文本行框缩短了。父容器 .content 未触发 BFC，因此它的高度仅由 in-flow 的段落内容撑开，不包含浮动元素的高度。
5.2 父容器高度塌陷与 BFC 清除浮动
html
<style>
.container {
border: 2px solid #333;
margin-bottom: 20px;
padding: 4px;
}
.float-box {
float: left;
width: 100px;
height: 60px;
background: lightblue;
margin: 4px;
}
.bfc-container {
overflow: hidden; /* 触发 BFC */
}
</style>
<div class="container">
<div class="float-box"></div>
<div class="float-box"></div>
</div>
<div class="container bfc-container">
<div class="float-box"></div>
<div class="float-box"></div>
</div>行为说明：第一个 .container 没有触发 BFC，它的高度塌陷为 0（仅由内边距和可能的行高撑起少量高度，边框可见但内部浮动元素像是“溢出”了）。第二个 .container 通过 overflow: hidden 建立了新的 BFC，因此在计算高度时包裹了浮动的子元素，边框完整延伸至浮动元素底部。
5.3 absolute：覆盖层定位
html
<style>
.card {
position: relative;
width: 300px;
padding: 16px;
border: 1px solid #ccc;
background: #f9f9f9;
}
.close-btn {
position: absolute;
top: 0;
right: 0;
width: 24px;
height: 24px;
background: #ccc;
text-align: center;
line-height: 24px;
cursor: default;
}
</style>
<div class="card">
<div class="close-btn">✕</div>
<p>卡片内容区域。关闭按钮通过绝对定位放置于右上角。</p>
</div>行为说明：.card 设置了 position: relative 作为包含块。.close-btn 的 position: absolute 使其脱离标准流，top: 0; right: 0 将其定位到 .card 的 padding-box 右上角。它不影响卡片中段落的位置，也不参与父容器（.card）的高度计算。
5.4 fixed 定位与“失效”场景
正常情况（fixed 相对视口）：
html
<style>
.fixed-nav {
position: fixed;
top: 0;
left: 0;
width: 100%;
background: #333;
color: #fff;
padding: 8px;
text-align: center;
}
.page-content {
margin-top: 40px;
height: 2000px;
background: linear-gradient(#fff, #eee);
}
</style>
<div class="fixed-nav">固定导航栏</div>
<div class="page-content">向下滚动时导航栏保持不动。</div>失效场景（祖先存在 transform）：
html
<style>
.transformed-ancestor {
transform: translateZ(0); /* 新建包含块 */
width: 100%;
height: 200px;
background: #eee;
overflow: auto;
}
.fake-fixed {
position: fixed;
top: 10px;
right: 10px;
background: red;
color: #fff;
padding: 4px;
}
</style>
<div class="transformed-ancestor">
<div class="fake-fixed">看起来像 fixed</div>
<p>当祖先有 transform 时，fixed 元素是相对于该祖先定位的，而非视口。</p>
</div>行为说明：.transformed-ancestor 的 transform 创建了新的包含块。.fake-fixed 虽然在 CSS 中声明 position: fixed，但其包含块变成了 .transformed-ancestor，因此它相对于这个祖先容器固定，随祖先滚动而移动。这不是浏览器 bug，而是 CSS Transforms 规范的要求——transform 建立了新的坐标空间。
5.5 relative：微调而不影响布局
html
<style>
.icon {
position: relative;
top: 2px; /* 向下微调 2px */
}
</style>
<span>账户余额：<span class="icon">💰</span> 12,345</span>行为说明：图标通过 position: relative 向下偏移 2px，其在标准流中的原始空间仍然保留，后续的文本位置完全不受影响。这是相对定位最常见的用法：在不破坏布局的前提下进行像素级视觉微调。
6. 注意点
float不影响块盒的位置：浮动元素只让后续的行框缩短，块级盒子的起始位置不会因为浮动而移动（但块级盒子内部的文本行框仍会环绕）。若希望块级盒子完全不受浮动影响，可以为其设置clear属性，或使其形成 BFC（如overflow: hidden），这时整个块盒会避开浮动元素。absolute/fixed元素自身的margin仍然有效，但无法通过margin推开其他 in-flow 元素，因为它们已经完全脱离标准流。z-index仅在定位元素（position不为static）上生效，且受层叠上下文影响。position: relative同样可以建立层叠上下文（当z-index不为auto时）。transform、filter、perspective、will-change、contain等属性会让fixed的包含块转移至该祖先元素，这是 CSS 规范有意的设计，不是缺陷。排查时应在开发者工具中沿父级链逐级检查这些属性的计算值。position: relative不脱离流，但它留出的“原始空间”可能会导致视觉错位。多个连续的相对偏移如果叠加，可能会让维护者困惑，应控制使用范围。
7. 应用
- 图文混排（文字环绕图片）：
float。这是float在设计之初唯一的目标用途。 - 页面主布局（栅格、等高列、弹性空间）：
flex或grid。用float实现多列布局属于历史遗留手段，现已不推荐。 - 覆盖层（模态框、气泡提示、下拉菜单）：
position: absolute配合position: relative的父容器构成包含块。 - 固定导航、悬停操作栏：
position: fixed。需确保祖先元素没有无意中创建新的包含块。 - 图标、装饰元素的像素级微调：
position: relative，不扰动周边布局。
8. 参考链接
- CSS 2.1 规范 —— 视觉格式化模型：
https://www.w3.org/TR/CSS21/visuren.html - CSS 2.1 规范 —— 浮动：
https://www.w3.org/TR/CSS21/visuren.html#floats - CSS 2.1 规范 —— 定位：
https://www.w3.org/TR/CSS21/visuren.html#positioning-scheme - MDN：Block formatting context
https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Block_formatting_context - MDN：
float
https://developer.mozilla.org/en-US/docs/Web/CSS/float - MDN：
position
https://developer.mozilla.org/en-US/docs/Web/CSS/position - CSS Transforms 规范（
transform创建包含块）：
https://www.w3.org/TR/css-transforms-1/#transform-rendering - Chromium 源代码：
LayoutBlockFlow::AddOverhangingFloats
https://source.chromium.org/chromium/chromium/src/+/main:third_party/blink/renderer/core/layout/layout_block_flow.cc - Chromium 源代码：
LayoutOutOfFlowPositioned
https://source.chromium.org/chromium/chromium/src/+/main:third_party/blink/renderer/core/layout/layout_out_of_flow_positioned.cc