标准流稳定性取决于是否在该起作用的地方让它起作用：嵌套flex容器中子元素自动脱离标准流，浮动不清导致父容器高度塌陷，data-*属性滥用拖慢样式计算与重排。
标准流是布局最稳定的基底，但一旦混入浮动、定位或 flex/grid 容器，它就容易被“绕过”或“忽略”。真正影响稳定性的不是标准流本身，而是你是否在它该起作用的地方让它起作用。
为什么标准流在嵌套 flex 容器里突然失效
父元素设了 display: flex，子元素哪怕没写 float 或 position，也自动脱离标准流上下堆叠的逻辑——它现在服从的是 flex 主轴/交叉轴对齐规则。此时再用 margin-top 想把子元素往下推，很可能被 align-items 覆盖，或者因 flex-shrink 导致尺寸压缩。
- 检查父容器是否意外继承了
display: flex（比如通过 CSS-in-JS 的全局样式或重置规则） - 子元素若需保持块级标准流行为，显式加
align-self: stretch+width: 100%，而非依赖默认 - 避免在 flex 容器内混用
float：它会被完全忽略，但会干扰justify-content的计算
浮动未清除导致父容器高度塌陷的实时检测法
开发者工具里看到父容器高度为 0 或远小于子元素，但子元素明明显示正常——这就是典型塌陷。它不报错，只“静默失效”。
- 在 Elements 面板中右键父容器 → “Break on” → “Layout changes”，然后操作页面（如 toggle class），看是否触发重排
- 临时加
outline: 1px solid red到父容器，如果 outline 是一条细线而不是包裹内容的框，说明高度坍缩 - 不用等上线才发现：本地开发时，在 CSS 中加
* { border: 1px dashed #999; }可快速暴露所有塌陷容器
data-* 属性滥用如何悄悄破坏标准流稳定性
data- 本身不渲染，但大量属性会让元素 DOM 节点变“重”，间接拖慢样式计算和 layout 触发时机——尤其在 JS 动态增删 class 后，浏览器要重新匹配所有带 [data-action] 的选择器，可能延迟重排。
- 避免在循环中反复调用
el.dataset.status；改为一次读取后缓存到变量或组件实例上 - 不要用
querySelectorAll('[data-id]')做高频查找；改用document.getElementById()或带 class 的更窄选择器 - SSR 页面中，
data-过多会使 HTML 字符串体积激增，TTFB 延长，首屏 layout delay 更明显
标准流的“稳定”不是靠它自己扛住一切，而是靠你主动守住它的边界：不把它塞进 flex 容器还指望它上下排列，不清浮动还指望父容器撑开，不控制 data-* 数量还指望 JS 快速响应——这些地方，才是稳定性真正断裂的起点。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
