根本原因是布局规则集中在单层容器，导致渲染流失控；应分层解耦：外层管区块排列，中层管尺寸对齐，内层只处理自身样式，并用 display: contents、语义化类名前缀和 @layer 精准控制层级与作用域。
为什么一改 display 或 float 就连锁崩塌
根本原因是布局规则被写在了“单层容器”里，所有子元素共用同一套定位逻辑。比如一个 .list 直接设 display: flex，又在里面混用 position: absolute、float: left 和 margin-right，CSS 层叠和渲染流就失去可控性。
真正该做的，是把布局责任按层级切开：外层只管“怎么排列区块”，内层只管“怎么排内部元素”，彼此不越界。
- 外层容器（如
.page、.section）只设display、gap、justify-content等宏观布局属性 - 中层容器（如
.card-group、.nav-list）负责区块尺寸与对齐，禁用margin干预外部流 - 内层元素（如
.card__title、.btn）只处理自身样式，不反向影响父级或兄弟节点
用 display: contents 拆掉“假容器”避免嵌套污染
常见陷阱是为加样式而套一层 <div class="wrapper">，结果它成了新的布局上下文，干扰了父级 flex 或 grid 的子项计算。
display: contents 能让这个容器“视觉消失”，子元素直接成为父级的子项，同时保留语义结构和 CSS 选择器路径。
立即学习“前端免费学习笔记（深入）”；
.wrapper {
display: contents;
}
<p>/* 原本：</p><section class="grid"><div class="wrapper"><h2>标题</h2><p>内容</p></div></section>
→ 现在 <h2> 和 <p> 直接参与 .grid 的 grid-template-columns 计算 */注意：display: contents 不支持 IE，且会丢失该元素自身的盒模型（padding/border/background 全失效），别把它当“透明 div”乱用。
给每个布局层级配专属类名前缀，拒绝 .left .right 这种裸名
像 .left 这种命名一旦全局存在，改一处就可能误触其他模块。必须绑定上下文，让样式作用域清晰可推断。
- 错：
.left { float: left; }→ 全局污染，无法判断谁该左对齐 - 对：
.sidebar__trigger { float: left; }→ 只属于.sidebar内部行为 - 对：
.header__logo { margin-inline-start: 1rem; }→ 明确是 header 区域内的 logo 间距
前缀不是为了炫技，是为了 grep 能准确定位：grep -r "card__" src/css/ 就能锁定所有卡片相关布局逻辑，改起来不心慌。
用 @layer 控制 CSS 层叠顺序，避免靠 !important 硬压
当多个布局层样式冲突（比如 .section 设了 gap: 2rem，但某个 .section--compact 想覆盖成 gap: 0.5rem），靠权重或 !important 只会让后续维护更脆。
CSS @layer 提供声明式优先级：
@layer base {
.section { gap: 2rem; }
}
<p>@layer components {
.section--compact { gap: 0.5rem; }
}</p><p>/<em> components 层永远高于 base 层，无需猜 specificity </em>/目前主流浏览器已支持，但构建工具（如 PostCSS）需开启 autoprefixer + css-layer 插件。没上 @layer 的老项目，至少把布局类（layout-*）、组件类（card-*）、状态类（is-active）分文件存放，靠文件加载顺序模拟层级。
最常被忽略的是：布局改动不是改“某个元素怎么摆”，而是调整“哪一层该负哪一段责任”。一旦把 margin 塞进卡片内部，就等于把布局权交给了内容组件；把它提到 .card-list 上，才真正回到布局层该管的事。
