如何避免CSS overflow:hidden裁剪页面内容-css教程-PHP中文网

display: flow-root可替代overflow: hidden清除浮动且不裁剪内容，它创建bfc但保留阴影、绝对定位等溢出渲染，现代浏览器支持良好，ie不支持。

如何避免css overflow:hidden裁剪页面内容

overflow:hidden裁剪了内容，先确认是不是真需要它

很多情况下加overflow: hidden只是为“清浮动”或“防溢出”，但实际既没浮动也没超宽内容，纯属惯性写法。它一旦生效，会静默裁掉所有超出padding box的内容——包括::before、box-shadow、position: absolute子元素、Tooltip，甚至滚动时的悬停菜单。

检查父容器是否真的存在溢出风险：打开开发者工具，临时删掉overflow: hidden，看内容是否真跑出边界；如果没变化，直接删掉它最安全。

浮动布局中用overflow: hidden清浮动 → 改用display: flow-root（更语义、不裁剪）
卡片想防文字换行撑宽 → 用white-space: nowrap + text-overflow: ellipsis + 显式width，而非靠overflow: hidden硬切
只是怕子元素错位 → 先查margin、transform、flex行为，不是所有“看起来溢出”都是真溢出

父容器设了overflow:hidden，但阴影/伪元素/Tooltip不见了

这不是渲染失败，是它们被裁在了padding box内侧。阴影绘制在border box外，::before若用了position: absolute且偏移超限，Tooltip若挂载在被裁容器内，全都会消失。

关键判断点：DOM链路上任意一层祖先只要同时满足position ≠ static + overflow: hidden/auto/scroll，就会成为包含块兼裁剪源——不一定是直接父级。

使用HTML,CSS,JavaScript开发Android应用程序英文文字pdf版附源文件

如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更

下载

给父容器加足够padding：至少≥box-shadow最大外延（blur-radius + abs(offset-y) + spread-radius），并确保box-sizing: border-box
::before显示为空？先确认content属性写了""，再加border: 1px solid red验证是否真渲染
Bootstrap Tooltip消失？必须加data-bs-container="body"，否则默认挂载到触发元素父级，极易被裁
绝对定位子元素被裁？给父容器加transform: translateZ(0)或position: relative（确保它是定位上下文）

移动端左右晃动，body { overflow-x: hidden } 不起作用

iOS Safari根本不会把body当裁剪容器，overflow-x: hidden加在body上基本无效。晃动根源通常是某个内部容器（比如轮播#panels）横向撑开后穿透到了视口层级。

必须把overflow-x加在「最靠近溢出源」且有明确尺寸的父容器上，而不是往上堆到html或body。

#panels { overflow-x: auto; -webkit-overflow-scrolling: touch; }比hidden更稳妥，避免手势误截
确保该容器有显式宽度：width: 100vw或min-width: 0（尤其在display: flex子项中）
兜底方案需同时写：html, body { overflow-x: hidden; }，且放在样式表末尾或加!important
慎用overflow: hidden简写——iOS WebView对overflow: hidden auto解析异常，必须拆成overflow-x: hidden; overflow-y: auto;