父容器高度为0但子元素可见，是典型HTML结构坍塌信号，主因是非法嵌套（如p内含div）或浮动未清除，导致浏览器自动修正DOM、父容器实际未包裹子元素。
CLP（Cumulative Layout Shift）高，八成不是 CSS 写得不好，而是 HTML 结构里有未被察觉的高度坍塌节点——它不报错、不警告，只在图片加载、字体就绪或 JS 插入内容时突然把下面所有元素往下顶。
父容器高度为 0 但子元素可见，怎么快速定位
这是最典型的坍塌信号：你看到子元素在页面上，但 DevTools 里父容器 height 显示为 0px，或者右键「Edit as HTML」删个空格后整个结构跳出去。
- 用
document.body.innerHTML和本地源码逐行比对，多出的或消失的<section></section>就是浏览器自动修正的证据 - 运行
document.head.innerHTML += '<style>*{outline:1px solid red!important;}</style>'，立刻暴露没被撑开的父容器（红色轮廓会“断层”） - W3C Validator 会直接报错
Element div not allowed as child of element p，这类嵌套错误必须先修，否则任何 CSS 都是补丁
float 元素未闭合导致的坍塌，为什么清浮动没用
写了 .clearfix::after { content:""; display:table; clear:both; } 却没生效？大概率是 class 没加对位置，或父容器本身已被浏览器“切开”了。
- 检查父容器是否真的包裹了浮动子元素：复制 HTML 片段到在线 HTML 验证器，看结构是否被重排
-
clear: both必须作用于浮动元素的**同级后续兄弟元素**，而不是父容器内部的伪元素——如果父容器已坍塌，伪元素根本没渲染在正确上下文里 - 更稳妥的方式是直接开启 BFC：
main { display: flow-root; }或.container { overflow: hidden; }，不需要额外 class，也不依赖 DOM 顺序
img/iframe 缺 width/height 导致的坍塌，CSS 无效的原因
哪怕写了 img { width: 100%; height: auto; }，CLP 仍超标——因为浏览器解析 HTML 阶段根本看不到这些样式，width 和 height 属性必须作为内联属性出现在标签上。
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
立即学习“前端免费学习笔记（深入）”；
-
<img src="a.jpg" width="600" height="400">是唯一能让 HTML 解析器立即分配占位空间的方式 -
srcset+sizes不替代width/height：浏览器可能先按默认尺寸占位，再根据sizes重算，造成两次偏移 - SVG 同理：必须带
viewBox，且显式写width和height，否则旧版 Safari 会 fallback 到300×150渲染再缩放
动态内容插入前没占位，body 被标为 CLP 主因
Lighthouse 报 <body> contributed most to CLP，往往不是 body 本身有问题，而是它里面某个 JS 插入的模块（广告、评论、推荐位）没预留空间。
- HTML 源码中就得写好占位：
<div id="ad-slot" style="min-height: 250px"></div>，高度尽量接近历史均值 - 禁用
visibility: hidden或opacity: 0占位：它们不脱离文档流，但无尺寸，等于没占 - 若必须 JS 注入，优先用
position: absolute或transform: translateY()，让新内容不参与流式布局计算
真正难排查的不是某一行代码，而是 HTML 解析阶段就已注定的尺寸不确定性——它藏在标签顺序、属性缺失和非法嵌套里，等资源加载完成才爆发。修复重点从来不在“怎么让抖动变小”，而在“让浏览器从第一帧就知道该留多少空间”。
