overflow: hidden 通过触发bfc使父ul重新包裹浮动子项、恢复高度计算和对齐基准，是兼容性最好（ie6+）的轻量方案；但需避免与float/position冲突，并注意ie8截断问题。
为什么 overflow: hidden 能修复浮动列表对齐不准
浮动元素脱离文档流，父 ul 高度塌陷，导致后续布局错位、换行异常、视觉“一高一低”——这不是 bug，是浮动的固有行为。触发 BFC（块级格式化上下文）后，ul 会重新建立独立渲染区域，包裹所有浮动子项，恢复高度计算和对齐基准。
关键点在于：overflow: hidden 是最轻量、兼容性最好（IE6+）的 BFC 触发方式，它不改变元素显示类型，也不影响内容溢出逻辑（除非真有溢出），比 display: flow-root 兼容更广，比伪元素清除更直接。
- 别用
overflow: auto：在某些旧版 Safari 或 IE 中可能意外触发滚动条或重绘抖动 - 避免
overflow: scroll：强制出现滚动条，破坏语义且影响可访问性 - 慎用
display: flow-root：虽语义清晰，但 IE 完全不支持，若需兼容 IE11 及以下，不能单独依赖
ul 设置 overflow: hidden 后仍不对齐？检查这三点
加了 overflow: hidden 却没效果，大概率是其他样式覆盖或干扰了 BFC 生效条件：
-
ul上同时存在float或position: absolute/fixed：这些会让元素脱离文档流，BFC 失效 -
ul的宽高被设为0或auto且无内容撑开：BFC 需要渲染上下文，空容器即使触发 BFC 也无高度 - 子项用了
vertical-align但父容器不是 inline-level：该属性对float元素无效，强行写只会误导调试
快速验证：打开 DevTools，选中 ul，看 computed 样式里 display 是否为 block，overflow 是否生效，再勾选“Show layout shifts”观察浮动区域是否被完整包裹。
IE8 下 overflow: hidden 导致文字截断怎么办
IE8 对 overflow: hidden 的实现有缺陷：当 ul 内含行内元素（如未闭合的 <span></span>）或字体渲染异常时，可能误判溢出边界，把正常文字裁掉。
- 临时解法：改用
zoom: 1（IE专有）触发 hasLayout，它和overflow: hidden效果等价，但不会触发截断 - 更稳方案：组合使用
zoom: 1; *overflow: hidden;（*是 IE7–8 hack），让 IE8 优先走 zoom，其他浏览器走 overflow - 根本规避：给
ul显式设置width或min-width，避免依赖自动宽度计算
注意：zoom 在现代 CSS 中已废弃，仅用于兜底老项目，新代码不应引入。
比起 overflow: hidden，flex 布局为何更值得切换
重置 BFC 是在浮动体系内打补丁；而 display: flex 是从根上替换布局模型。两者成本差异明显：
- 清除浮动逻辑消失：
flex-wrap: wrap自动处理换行，无需:nth-child清 margin 或::after清浮 - 对齐控制粒度更细：
align-items: flex-start替代vertical-align: top，gap替代margin-right，无外边距合并风险 - 响应式更自然：配合
min-width和flex-basis，一行几个由容器宽度决定，不用硬编码3n类选择器
真正难的不是让 ul 触发 BFC，而是当列表嵌套在 modal、tab pane 或 JS 动态插入区域时，overflow 截断弹层、下拉框或 tooltip —— 这时候，flex 就不只是“更好”，而是唯一不破防的选择。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
