根本原因是布局规则集中在单层容器，导致渲染流失控；应分层解耦：外层管区块排列，中层管尺寸对齐，内层只处理自身样式，并用 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 class="aritcle_card flexRow">
<div class="artcardd flexRow">
<a class="aritcle_card_img" href="/xiazai/code/12093" title="CSS婚礼策划服务机构宣传网站模板"><img
src="https://img.php.cn/upload/webcode/000/000/018/178607072210981.jpg" alt="CSS婚礼策划服务机构宣传网站模板" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
<div class="aritcle_card_info flexColumn">
<a href="/xiazai/code/12093" title="CSS婚礼策划服务机构宣传网站模板">CSS婚礼策划服务机构宣传网站模板</a>
<p>CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。</p>
</div>
<a href="/xiazai/code/12093" title="CSS婚礼策划服务机构宣传网站模板" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a>
</div>
</div></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 上，才真正回到布局层该管的事。
