overflow: visible 表示内容溢出仍可见且不裁剪，父容器尺寸不变，仅渲染在外部；怪异模式下会自动扩容，标准模式下需用 min-height 等避免塌陷。
标准模式下 overflow: visible 的真实表现
在标准模式（Standards Mode）中，overflow: visible 是块级元素的默认值，但它**不等于“内容无约束地撑开父容器”**。实际效果是：内容溢出区域可被渲染，但父元素尺寸不会因此扩大；父元素仍按自身盒模型（width/height + padding + border）计算，溢出部分只是“画”在外部，不影响布局流。
常见错误现象：div 设了固定 height: 200px，内部子元素高度超限，却误以为“父容器应该自动变高”——这在标准模式下不会发生，除非用 min-height 或去掉高度限制。
- 该行为适用于所有现代浏览器（Chrome/Firefox/Safari/Edge），且与
box-sizing设置无关 -
position: absolute子元素即使溢出，也不会触发父元素重绘或滚动条 - 若父元素同时设了
overflow: hidden，则溢出部分被裁剪，且可能影响clip-path或transform的渲染边界
怪异模式（Quirks Mode）下 overflow 的“自动扩容”陷阱
当 HTML 缺少 <!DOCTYPE html> 或开头有 BOM/空格时，浏览器进入怪异模式。此时 overflow 行为严重偏离标准：即使未显式设置 overflow，元素也会把溢出内容当作“需要容纳的一部分”，**自动调整自身高度以包裹全部内容**。
典型场景：一个 <div> 内含多行文本和浮动图片，在怪异模式下看似“自适应”，但换到标准模式就突然塌陷——不是代码错了，而是文档模式切换暴露了隐性依赖。
立即学习“前端免费学习笔记（深入）”；
- 该行为在 IE 系列（尤其 IE6–IE8）最明显，但现代 Chrome/Firefox 在怪异模式下也模拟类似逻辑
-
overflow: visible在怪异模式下等效于“无溢出控制”，而overflow: hidden才真正裁剪 - 验证方式：打开 DevTools → Elements 面板顶部查看渲染模式，显示
Quirks即中招
overflow-x / overflow-y 不一致时的 auto 重置规则
当 overflow-x 和 overflow-y 值不同，且其中一个是 visible（或未声明，默认为 visible），另一个是非 visible 值（如 hidden 或 scroll）时，浏览器会**强制将 visible 值重置为 auto**，而非保持原意。
例如：overflow-x: hidden; overflow-y: visible; 实际等效于 overflow-x: hidden; overflow-y: auto; —— 垂直方向会出现滚动条（哪怕内容没溢出），这是 CSS 规范明确要求的行为，不是 bug。
- Firefox 和 Safari 严格遵循该规则；Chrome 从 v100 起也统一实现
- 想避免意外滚动条，必须显式写全：
overflow-x: hidden; overflow-y: hidden; -
overflow: hidden是简写，它同时设置 x/y 方向，不会触发重置
Canvas 元素溢出与文档模式的双重耦合
canvas 默认是 display: inline，其底部基线间隙 + 怪异模式下的盒模型计算，共同导致“明明设了 height: 100vh 却出现滚动条”。这不是单靠 overflow: hidden 能解决的问题。
真正关键点有两个：一是用 canvas { display: block; } 消除内联间隙；二是确保 <!DOCTYPE html> 在第一行无空格/BOM，否则即使加了 display: block，怪异模式仍可能让 html/body 的 height: 100% 失效。
- 单独设置
body { overflow: hidden; }只是掩盖症状，不能根治 - 移动端 WebView（如微信内置浏览器）对怪异模式更敏感，BOM 导致的渲染异常比桌面端更频繁
-
<canvas>的width/height属性是像素值，CSS 中的width/height是布局尺寸，二者不一致会直接拉伸图像——这也可能被误判为“溢出”
overflow 行为是绑定的底层机制，改样式前先确认 DOCTYPE 是否生效，比反复调 overflow 参数更有效。 
