塌陷不是CSS问题，而是HTML结构违法导致的浏览器容错修正结果；修复嵌套比加overflow: hidden更治本，且能避免SSR hydration失败、JS选择器失配等连锁问题。
直接说结论：塌陷不是CSS问题，而是HTML结构违法导致的浏览器容错修正结果；修复嵌套比加overflow: hidden更治本，且能避免SSR hydration失败、JS选择器失配等连锁问题。
为什么<p></p>里放<div>会触发塌陷
<p>浏览器解析到<code><p></p>
<div>xxx</div>时，会立刻闭合<p></p>，把<div>提到外面，再补一个空<code><p></p>。最终DOM变成：<p>xxx</p>
<p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</p><div class="aritcle_card flexRow">
<div class="artcardd flexRow">
<a class="aritcle_card_img" href="/xiazai/skill10828" title="财经HTML高端海报生成"><img
src="https://img.php.cn/upload/skill/001/246/273/6adaf20dbae7c507.jpg" alt="财经HTML高端海报生成" ></a>
<div class="aritcle_card_info flexColumn">
<a href="/xiazai/skill10828" title="财经HTML高端海报生成">财经HTML高端海报生成</a>
<p>复杂得财经如何变成清晰，适合手机看的海报？如何加上你的IP</p>
</div>
<a href="/xiazai/skill10828" title="财经HTML高端海报生成" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a>
</div>
</div>
<div>xxx</div>
<p></p>。
后果很具体：
-
p > div这类CSS选择器完全失效（<div>已不在<code><p></p>内） - 原本靠
<p></p>的margin控制的段落间距消失，相邻块可能“粘连” - 若用
document.querySelector('p')取内容，可能拿到意外的空节点 - 服务端渲染（SSR）时生成的DOM与客户端hydration不一致，React/Vue会报hydration mismatch警告
- 默认项目符号（
list-style）不显示，ul li样式规则全部失效 - 必须改用
ul + div.item这种脆弱选择器，一旦DOM顺序微调就断掉 - 屏幕阅读器无法识别语义，影响无障碍访问
- 后续用JS动态插入
<li>时，结构与初始HTML不一致，逻辑容易出错 - Bootstrap Table等框架依赖显式
<tbody>做样式隔离，漏写会导致悬停、边框等样式丢失 <h3>行内标签嵌套块级元素的“静默断裂”陷阱</h3> <p><code><a></a>、<span></span>、<strong></strong>这些行内元素，按规范不能包含<div>、<code><p></p>、<h3></h3>等块级标签。浏览器遇到<a><div>xxx</div></a>，会拆解为<a></a><div>xxx</div>，造成布局断裂。真正容易被忽略的是：
<h1>～<h6></h6> </h1>和<dt></dt>也只接受行内内容。往里面塞<p></p>或<div>，一样触发自动闭合——这不是“看起来还行”，而是DOM结构已经失控。 <p>最稳妥的做法，是把所有“想用块级容器但又卡在行内标签里”的需求，转为用<code>display: contents或直接替换为语义化块级标签（比如用<button></button>替代<a></a>包裹操作区域），而不是靠浏览器容错去赌解析结果。
<ul></ul>和<ol></ol>只接受<li>作为直接子元素
写成<ul><div class="item">xxx</div></ul>是非法嵌套。浏览器会把<div>移出<code><ul></ul>，<ul></ul>内部只剩空列表。
这会导致：
