父容器设margin: 0 auto未居中，主因是float子元素致其宽度坍缩为0；须显式设width、display: inline-block或display: flow-root来恢复可计算宽度，并清除浮动以撑高容器。
float让父容器width计算失效，margin: 0 auto失去作用对象
父容器设了margin: 0 auto却没居中，往往不是你写错了，而是它根本没宽度可算。float子元素脱离文档流后，父容器若没显式设置width，其计算出的宽度默认是内容宽度（即0或极窄），margin: 0 auto自然无从分配左右空间。
常见错误现象：.parent { margin: 0 auto; } + .child { float: left; width: 200px; } → 父容器视觉上紧贴左边缘，DevTools里看到computed width是auto或一个极小值。
- 父容器必须有可计算的宽度：用
width、max-width或inline-block触发包裹行为 -
display: inline-block比width更灵活，但需处理父级white-space或字体大小带来的间隙 - 若父容器本身也
float或position: absolute，它就彻底退出文档流，margin: 0 auto完全失效
浮动子元素导致父容器高度塌陷，间接破坏居中基准
父容器高度为0时，即使它视觉上“看起来居中”，实际offsetHeight === 0，背景、边框、点击区域全部丢失——这不是居中失败，是容器本身已不存在布局意义。
典型表现：加了margin: 0 auto，但父容器背景色不显示、后续元素覆盖在浮动块上、JS读取getBoundingClientRect().height返回0。
- 清除浮动不是可选项，是居中前提：用
::after伪元素+display: table+clear: both，缺一不可 -
overflow: hidden能触发BFC并“撑高”，但会裁剪溢出内容，移动端尤其危险 -
display: flow-root是最干净解法，但IE全系不支持，老项目需降级
float和text-align:center根本不在同一作用域
text-align: center只影响行内内容（文字、inline元素）的对齐，对已脱离文档流的float元素无效。写.parent { text-align: center; } + .child { float: left; }，子元素照样贴左。
错误认知：“给父容器加text-align: center就能让浮动子项居中”——这等于让水流往石头上泼，指望它自己绕成圆圈。
-
text-align对float、absolute、fixed均无影响 - 若真要靠
text-align生效，得把子元素改成display: inline-block并清除float - 现代方案中，
text-align应仅用于纯文本或图标类inline元素对齐
真正能落地的居中替代路径
别在float上打补丁。你要的不是“让浮动元素居中”，而是“让内容按预期位置呈现”。直接换布局模型，省掉90%的调试时间。
- 单个块居中：
position: relative父容器 +position: absolute; left: 50%; transform: translateX(-50%) - 多个子项水平分布：
display: flex; justify-content: center（注意父容器需有高度或min-height） - 图文环绕场景保留float，但用
display: flow-root包裹图文区，避免污染全局布局 - 老项目迁移时，先搜
float:，再批量替换成flex相关属性，JS里依赖offsetTop的逻辑必须重测
最常被忽略的一点：float的破坏性不是bug，是规范定义的行为。你越想“修复”它，就越容易陷入清除、hack、再清除的循环。真正的解法，是承认它已经过时，并让父容器主动退出浮动上下文。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
