text-align: center 对 float 元素无效，因其脱离 ifc 进入 bfc；应改用 display: flex + justify-content: center 实现居中，同时清除残留的 clear/overflow 声明。
text-align: center 对 float 元素完全无效，不是写法问题，是 CSS 规范层面的限制——别再试了，直接换 display: flex。
为什么 text-align 不作用于 float 元素
text-align 只影响「行内格式化上下文（IFC）」中的内容，比如文字、<span></span>、inline-block 元素。而 float 会让元素脱离文档流、生成新的 BFC，彻底退出 IFC。浏览器看到 float: left 的 <div>，就当它不在“行”里，<code>text-align 自然忽略它。
常见错误现象：
- 父容器写了
text-align: center，子元素加了float: left，结果还是贴左 - 以为加个
margin: 0 auto能补救，但该写法对浮动元素同样被规范禁止 - 试图用
vertical-align调整，也无效——它只对 inline/table-cell 生效
用 display: flex 替代 float 的实操要点
这不是“升级”，而是换掉不匹配的工具。浮动本就不是为居中设计的，flex 才是现代布局的正确解法。
关键操作：
- 移除所有
float声明（包括float: left、float: right） - 父容器设
display: flex+justify-content: center（水平居中） - 如需垂直居中，加
align-items: center；注意：父容器要有高度参考（min-height或height），否则在 IE11 中可能失效 - 若子元素需换行，加
flex-wrap: wrap；若需等宽分布，用flex: 1或justify-content: space-between
示例（图片居中）：
.container {
display: flex;
justify-content: center;
align-items: center;
min-height: 200px;
}
img {
/* 移除 float */
width: 100px;
height: 100px;
}
保留 float 的老项目怎么过渡
如果 HTML 结构不能动、还要支持 IE9+，可临时用 display: table-cell，但必须满足两个硬条件：
- 父容器必须有明确高度（
height或min-height），table布局不撑高 - 子元素不能自己设
float，否则display: table-cell会退化为block，vertical-align: middle失效
更现实的做法是：只改局部模块，把浮动块包进一个新 <div class="flex-center">，避免全局重构。别为了兼容旧代码，让整个页面继续承担浮动塌陷、基线错位、响应式断裂这些隐性成本。<p>真正容易被忽略的是：很多开发者在改成 flex 后，忘了删掉残留的 <code>clear: both、overflow: hidden 或伪元素清除代码——它们和 flex 冲突，可能造成高度截断或布局异常。动手前先 grep 一遍项目里的 clear 和 overflow。
