父容器高度为0但子元素仍在页面上，是因为html结构不合法导致浏览器自动修正dom：如p标签内不能包含div，浏览器会提前闭合p标签，使后续div脱离父容器。
为什么父容器高度为0，但子元素还在页面上？
这不是CSS没写对，是HTML结构本身被浏览器悄悄改写了。比如你写了 <div class="wrapper">
<p>文字</p>
<div>块内容</div>
</div>，但 <p></p> 不能合法包含 <div>，浏览器解析时会立刻关闭 <code><p></p>，把后面的 <div> 推到外面去——实际DOM变成两个独立节点：<code><div class="wrapper"><p>文字</p></div> 和 <div>块内容</div>。wrapper根本没包住它。
- 用 DevTools 右键父容器 → “Edit as HTML”，删一个字符再回车：如果子结构整体跳出去，说明原始HTML已被修正
- 在 Console 运行
document.body.innerHTML，和源码逐行比对，多出的、消失的<section></section>都是线索 - W3C Validator 会直接报错：
Element div not allowed as child of element p，这类必须优先修复
script 放 head 里，首屏就卡住？
浏览器遇到未加修饰的 <script src="app.js"></script>，会立刻暂停 HTML 解析，下载并执行脚本后才继续。首屏白屏、DOMContentLoaded 延迟，往往就卡在这儿。
- 非关键 JS 一律放
