details展开后内容区域高度为0或跳动，本质是子元素含浮动、绝对定位或未建立BFC导致父级无法正确计算高度；推荐用display: flow-root解决，兼容现代浏览器且无裁剪风险。
标签本身不会直接导致高度塌陷，但展开后内容区域“突然没高度”或“父容器不包裹内容”，本质是它内部的渲染行为触发了经典的高度塌陷现象——尤其是当子内容含浮动、未闭合的 BFC 或 inline-level 布局时。
为什么
给
为什么details展开后内容区域高度为0或跳动
这不是details的 bug，而是它默认 display: block，但子元素若含 float、position: absolute 或未建立 BFC 的块级流，就会让父级无法正确计算高度。常见于：嵌套了浮动导航栏的说明区块、内联图标+文字混排未清除浮动、pre 中长代码行撑破容器又没换行控制。
给details加overflow: hidden能解决吗
可以，但有风险：
- 它会截断所有溢出内容（比如带横向滚动的
pre或 tooltip 弹出层） - 在 Safari 16.4–17.5 中，
overflow: hidden可能干扰summary的点击响应区域 - 更推荐用
display: flow-root—— 语义清晰、无裁剪副作用、现代浏览器全覆盖（Chrome 69+、Firefox 62+、Safari 15.4+）
实际该怎么做：三步最小干预
不用 JS，也不改 HTML 结构，只加 CSS：
- 强制
details建立新 BFC：details { display: flow-root; } - 确保
summary点击区域稳定：summary { display: block; padding: 8px 12px; user-select: none; } - 内容区防撑破：
details > * { word-break: break-word; }（尤其对pre或code块，可额外加white-space: pre-wrap;）
容易被忽略的 Safari 兼容细节
Safari 对 details 的 open 状态过渡支持弱，且 summary::marker 默认样式不可靠。如果你用了自定义箭头图标：
htmlppt.skill
下载
把任意文章或文档内容转换成精美的全屏翻页 HTML 演示文件（幻灯片风格）。当用户发来一篇文章、文档链接、Markdown 内容、或粘贴的文本，并且希望生成演示用的 HTML 时触发。支持任意内容来源：iWiki 链接、KM 链接、本地文件路径、直接粘贴的文本。生成的 HTML 文件保存到本地工作区，并通过企微直接发送给用户。触发词示例：帮我把这篇文章做成PPT、转成演示文档、生成HTML幻灯片、做个演示、转成可以演示的格式、article to deck、make a slide。
立即学习“前端免费学习笔记（深入）”；
- 别依赖
vertical-align: middle对齐图标——改用summary { display: flex; align-items: center; } - 避免在
summary内写纯文本后紧跟div，换行符会产生空白间隙；统一用<p></p>或<div></div>包裹内容 - 如果必须兼容 Safari 15.3 及更早版本，
display: flow-root不生效，降级用details { overflow: auto; }并加height: min-content;防止意外收缩
真正卡住人的不是 details 本身，而是它把旧布局问题（浮动、BFC 缺失、inline 布局脆弱性）暴露得更明显。修它，顺手就把周边浮动清理和 BFC 意识也带起来了。
