父容器高度为0但子元素可见，主因是浮动导致脱离文档流；解决方法是触发BFC（如overflow:auto）或清除浮动（如clearfix），二者均使父容器重新包含子元素。
布局错位、内容塌陷、父容器高度为0——这些问题90%不是CSS写错了，而是HTML结构本身就被浏览器悄悄改写了。
为什么父容器高度为0，但子元素明明在页面上？
这是典型的HTML嵌套错误引发的DOM结构崩坏。浏览器解析时遇到非法嵌套（比如<p>里塞了<div>），会立刻关闭<p>，把后续内容扔到外面。结果就是你写的<div class="wrapper"><p>文字</p><div>块内容</div></div>，实际DOM变成<div class="wrapper"><p>文字</p></div><div>块内容</div>——wrapper根本没包住第二个<div>。
- 用DevTools右键父容器 → “Edit as HTML”，删一个字符再回车：如果子结构整体跳出去，说明原始HTML已被修正
- 在Console运行
document.body.innerHTML，和你本地源码逐行比对，多出的</p>、消失的<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>、漂移的<img>、被截断的<footer>。
- 如果页面太乱，缩小范围：
div { outline: 2px solid #0088ff !important; } - 退出调试时执行
document.querySelector('style').remove()即可清除 - 注意：
outline会覆盖部分伪元素效果（如::before背景），临时调试够用
语义化标签替换后CSS失效怎么办？
<div class="header">换成<header>后样式没了？不是标签不兼容，是你的CSS规则还写着.header，压根没命中新标签。
立即学习“前端免费学习笔记（深入）”；
- 现象：
<header>显示为inline、宽度塌陷、margin不生效——实际是“无样式”，回退到浏览器默认值 - 修正方式：
header { height: 60px; }，或渐进迁移：header, .header { height: 60px; } - 特别注意浮动清除：
<div class="clearfix">规则不会作用于<main>，得加main { display: flow-root; }或显式保留class="clearfix"
自闭合标签多写</>或</img>会怎样？
<img>、<input>、<br>这些是void元素，在HTML5中禁止闭合。写成<img src="x.jpg"></img>会被当成两个标签：第一个被忽略，第二个被当作普通容器，后续所有嵌套整体右移一级。
- 错误后果：整个页脚被塞进导航栏、
<form>突然失效、JS用document.querySelector找不到元素 - 正确写法统一用
<img src="x.jpg">（HTML5推荐省略/>） - VS Code装插件Auto Close Tag和Highlight Matching Tag，写时立刻高亮配对，避免手动数漏
真正卡住人的，往往不是某条CSS规则写错，而是DOM结构从解析阶段就歪了——而这种错误浏览器根本不报错，只默默重排。检查真实DOM结构，永远比猜样式优先级更可靠。
