父级设 float 后 margin: 0 auto 失效，因其脱离文档流，不再满足“普通块级元素+明确宽度”前提，导致浏览器不计算左右外边距；修复须移除 float，改用 flex、flow-root 或 clearfix（需配合移除 float）。
父级设 float 后整页居中失效，根本原因是它让父级自身也脱离文档流，导致外层容器（比如 body 或布局 wrapper）失去参照基准——margin: 0 auto 没了作用对象，自然不居中。
为什么父级加 float 会让 margin: 0 auto 失效
浏览器只对“处于普通文档流中的块级元素”计算左右剩余空间并分配给 auto 外边距。一旦父级自己也加了 float: left 或 float: right：
- 它就不再是文档流中的常规块级元素，而是浮动块，
margin: 0 auto被规范强制重置为0 - 它的宽度变成
fit-content（由内容撑开），不再满足“有明确width”这一硬性前提 - 外层容器（如
.wrapper）若依赖该父级的高度或位置做居中，也会因高度塌陷或定位漂移而错位
常见误用场景：用 float 模拟“整页居中容器”
比如这样写：
.page-container {
float: left;
width: 960px;
margin: 0 auto; /* 这行完全无效 */
}结果是容器贴左，而非居中。问题不在 width，而在 float 直接废掉了 margin: auto 的执行逻辑。
立即学习“前端免费学习笔记（深入）”；
更隐蔽的错误是嵌套浮动：子元素浮动 → 父级为“兜住”也加 float → 父级的父级再加 float……最终整个布局链都脱离流，body 下只剩零散浮动块，text-align: center 或 margin: 0 auto 全部失效。
真正有效的修复方式（按优先级排序）
不要给需要居中的容器本身加 float，改用以下任一方式：
-
删掉父级
float，用display: flex+justify-content: center：最干净，无需设宽，响应式友好 -
保留结构但启用 BFC：父容器设
display: flow-root（推荐）或overflow: hidden（慎用，可能裁剪内容） -
传统方案：清除浮动后回归标准流：给父容器加
clearfix类（::after { content: ""; display: table; clear: both; }），确保它能正确撑高并参与居中计算 -
绝对定位模拟居中（仅限固定宽高）：父容器设
position: relative，子容器用position: absolute; left: 50%; transform: translateX(-50%)
最容易被忽略的一点
很多开发者发现加了 clearfix 后仍不居中，其实是忘了：清除浮动只解决高度塌陷，不恢复文档流中的“块级上下文”。如果父容器还挂着 float，那它依然不是块级流元素——margin: 0 auto 依旧无效。必须同时移除 float 声明，只靠 clearfix 或 flow-root 来维持包裹能力。
