根本原因是布局规则集中在单层容器，导致渲染流失控；应分层解耦：外层管区块排列，中层管尺寸对齐，内层只处理自身样式，并用 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 拆掉“假容器”避免嵌套污染
常见陷阱是为加样式而套一层 立即学习“前端免费学习笔记（深入）”； /* 原本： 内容 直接参与 .grid 的 grid-template-columns 计算 */ 注意： 像 前缀不是为了炫技，是为了 grep 能准确定位： 当多个布局层样式冲突（比如 CSS @layer components {
.section--compact { gap: 0.5rem; }
} / components 层永远高于 base 层，无需猜 specificity / 目前主流浏览器已支持，但构建工具（如 PostCSS）需开启 最常被忽略的是：布局改动不是改“某个元素怎么摆”，而是调整“哪一层该负哪一段责任”。一旦把 flex 或 grid 的子项计算。display: contents 能让这个容器“视觉消失”，子元素直接成为父级的子项，同时保留语义结构和 CSS 选择器路径。.wrapper {
display: contents;
}
标题
和
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 -r "card__" src/css/ 就能锁定所有卡片相关布局逻辑，改起来不心慌。用
@layer 控制 CSS 层叠顺序，避免靠 !important 硬压.section 设了 gap: 2rem，但某个 .section--compact 想覆盖成 gap: 0.5rem），靠权重或 !important 只会让后续维护更脆。@layer 提供声明式优先级：@layer base {
.section { gap: 2rem; }
}
autoprefixer + css-layer 插件。没上 @layer 的老项目，至少把布局类（layout-*）、组件类（card-*）、状态类（is-active）分文件存放，靠文件加载顺序模拟层级。margin 塞进卡片内部，就等于把布局权交给了内容组件；把它提到 .card-list 上，才真正回到布局层该管的事。
