父容器高度为0但子元素可见，主因是浮动导致脱离文档流；解决方法是触发bfc（如overflow:auto）或清除浮动（如clearfix），二者均使父容器重新包含子元素。

布局错位、内容塌陷、父容器高度为0——这些问题90%不是CSS写错了，而是HTML结构本身就被浏览器悄悄改写了。

为什么父容器高度为0，但子元素明明在页面上？

这是典型的HTML嵌套错误引发的DOM结构崩坏。浏览器解析时遇到非法嵌套（比如<p></p>里塞了<div>），会立刻关闭<code><p></p>，把后续内容扔到外面。结果就是你写的<div class="wrapper"> <p>文字</p><div class="aritcle_card flexRow artxards"> <div class="artcardd flexRow"> <a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill5806" title="html-deploy"><img src="https://img.php.cn/upload/skill/000/000/081/179066538882434.jpg" alt="html-deploy" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a> <div class="aritcle_card_info flexColumn"> <a rel="nofollow" href="/xiazai/skill5806" title="html-deploy" class="overflowclass">html-deploy</a> <p class="overflowclass">使用 htmlcode.fun 将 HTML 内容或文件部署到网页，适用于用户要求“部署到网页”“托管此 HTML”“生成此前端...的实时链接”等场景。</p> </div> <a rel="nofollow" href="/xiazai/skill5806" title="html-deploy" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a> </div> </div> <div>块内容</div> </div>，实际DOM变成<div class="wrapper"><p>文字</p></div> <div>块内容</div>——wrapper根本没包住第二个<div>。 <ul> <li>用DevTools右键父容器 → “Edit as HTML”，删一个字符再回车：如果子结构整体跳出去，说明原始HTML已被修正</li> <li>在Console运行<code>document.body.innerHTML，和你本地源码逐行比对，多出的、消失的<section></section>都是线索

W3C Validator会直接报错：Element div not allowed as child of element p，这类必须优先修复

用outline快速揪出溢出和错位元素

别一上来就调CSS。先执行这行代码让所有元素显形：document.head.innerHTML += '<style>*{outline:1px solid red!important;background:rgba(255,0,0,0.05)!important;}</style>'。红色轮廓不会影响盒模型，比border更安全，能立刻暴露撑破容器的<div>、漂移的<code><img>、被截断的<footer></footer>。

• 如果页面太乱，缩小范围：div { outline: 2px solid #0088ff !important; }
• 退出调试时执行document.querySelector('style').remove()即可清除
• 注意：outline会覆盖部分伪元素效果（如::before背景），临时调试够用

语义化标签替换后CSS失效怎么办？

<div class="header">换成<code><header></header>后样式没了？不是标签不兼容，是你的CSS规则还写着.header，压根没命中新标签。

• 现象：<header></header>显示为inline、宽度塌陷、margin不生效——实际是“无样式”，回退到浏览器默认值
• 修正方式：header { height: 60px; }，或渐进迁移：header, .header { height: 60px; }
• 特别注意浮动清除：<div class="clearfix">规则不会作用于<code><main></main>，得加main { display: flow-root; }或显式保留class="clearfix"

  自闭合标签多写>或会怎样？

  <img>、<input>、<br>这些是void元素，在HTML5中禁止闭合。写成<img src="x.jpg">会被当成两个标签：第一个被忽略，第二个被当作普通容器，后续所有嵌套整体右移一级。

  • 错误后果：整个页脚被塞进导航栏、<form></form>突然失效、JS用document.querySelector找不到元素
  • 正确写法统一用<img src="x.jpg">（HTML5推荐省略/>）
  • VS Code装插件Auto Close Tag和Highlight Matching Tag，写时立刻高亮配对，避免手动数漏

  真正卡住人的，往往不是某条CSS规则写错，而是DOM结构从解析阶段就歪了——而这种错误浏览器根本不报错，只默默重排。检查真实DOM结构，永远比猜样式优先级更可靠。