overflow: hidden对左栏无效，因它仅裁剪内容而不参与布局让位；需配合float或flex布局，由右栏触发BFC或设flex:1实现避让，且左栏必须有明确宽高约束。
左侧固定宽度 + overflow: hidden 为什么不起作用
直接给左栏设 width: 240px 和 overflow: hidden，右栏依然叠上来或换行——因为 overflow 只对自身盒模型生效，不参与布局让位。它不是“推走右边”的指令，而是“裁掉自己超长内容”的开关。
常见错误现象：左栏文字溢出被裁剪了，但右栏还是压在上面；或者左栏设置了 overflow: hidden 却发现滚动条消失、内容被截断，而布局毫无变化。
- 必须先让左栏脱离正常流（比如
float: left或position: absolute/fixed），否则overflow对布局零影响 -
overflow: hidden在左栏上唯一有用场景是配合white-space: nowrap; text-overflow: ellipsis;做单行文本截断 - 若想靠
overflow触发 BFC 让右栏避让，得加在右栏容器上，且该容器不能有浮动子元素干扰
用 float + overflow:hidden 让右栏自动避让左栏
这是兼容性最好、最轻量的方案，核心不是左栏的 overflow，而是右栏触发 BFC 避开浮动元素。
实操要点：
立即学习“前端免费学习笔记（深入）”；
- 左栏设
float: left和明确width（如240px） - 右栏不浮动，也不设
margin-left，而是加overflow: hidden（或overflow: auto）——这会触发 BFC，自动形成“隔离区”，绕开左栏浮动区域 - 父容器必须清除浮动，否则高度塌陷：
.parent::after { content: ""; display: table; clear: both; } - IE6/7 需补
zoom: 1兼容 hasLayout
示例关键 CSS：
.left { float: left; width: 240px; background: #eee; }
.right { overflow: hidden; background: #f9f9f9; }
.parent::after { content: ""; display: table; clear: both; }fixed 定位下左栏溢出隐藏 + 右栏不遮挡
当左栏要固定在视口左侧（比如侧边导航），又希望内容过长时能滚动、不撑高容器，overflow-y: auto 必须配合显式高度控制，否则无效甚至溢出屏幕。
- 左栏必须设
position: fixed+top: 0+left: 0+width+height: 100vh（或减去 header 高度的calc(100vh - 64px)） - 仅设
height: 100vh不够——如果页面总高小于视口，会出现空白底边；建议用max-height: 100vh+overflow-y: auto - 右栏用
margin-left预留空间，值必须与左栏width完全一致（如margin-left: 240px） - 确保
html, body { overflow-y: scroll; }，避免 Safari 下100vh计算异常导致滚动失效
Flex 布局中左栏固定 + 内容溢出安全处理
Flex 是目前最稳的方案，但左栏的 overflow 行为容易被忽略：它只裁自己，不影响右栏，也不自动触发避让逻辑。
- 父容器设
display: flex+min-height: 100vh - 左栏设
flex: 0 0 240px（不缩放、不增长、宽固定），再加overflow-y: auto和max-height: 100vh - 右栏设
flex: 1，不是width: 100%——后者在嵌套 flex 中可能双重计算导致宽度异常 - 若左栏内有长单词或 URL，需额外加
word-break: break-word或overflow-wrap: break-word，否则overflow: hidden也拦不住硬换行
真正容易被忽略的是：左栏即使设了 overflow: hidden，若没限制 height 或 max-height，它仍会无限撑高，BFC 或 flex 都救不了——溢出控制永远依赖尺寸约束，不是单纯一个 overflow 属性能兜住的。
