根本原因是浮动元素脱离文档流，导致父元素高度塌陷；解决须先清除浮动（推荐display: flow-root或clearfix伪元素），再用fit-content配合margin: 0 auto居中。
父元素不包裹浮动子元素的根本原因
浮动元素会脱离文档流，父元素计算高度时直接忽略它们，导致父元素高度塌陷。这不是居中问题，而是布局基础失效——fit-content 本身不解决塌陷，它只影响宽度计算逻辑。
先清除浮动，再谈居中
必须先让父元素正确包裹子元素，否则任何居中方案都建立在错误前提上。常见但易错的做法是仅用 overflow: hidden 或 display: flow-root 清除浮动，但要注意：
-
overflow: hidden会意外裁剪溢出内容（比如下拉菜单、tooltip） -
display: flow-root是目前最干净的方案，兼容性到 Chrome 64+/Firefox 58+，IE 不支持 - 如果必须兼容旧 IE，用伪元素清除：
::after { content: ""; display: table; clear: both; }
fit-content 在居中中的真实作用
fit-content 是 width/height 的值，不是布局模型。它让父元素宽度收缩到子元素内容宽度（类似 inline-block 行为），从而配合 margin: 0 auto 实现水平居中。但注意：
- 仅对
width设置fit-content才有效，height: fit-content对垂直居中无帮助 - 父元素需是块级且非
float/absolute定位，否则margin: 0 auto失效 - 子元素若含多个浮动项，
fit-content计算的是整行总宽度，不是单个浮动块宽度
.parent {
display: flow-root; /* 先清除浮动 */
width: fit-content; /* 收缩宽度 */
margin: 0 auto; /* 再居中 */
}
更现代的替代思路
如果目标只是“包裹 + 居中”，浮动本身已是过时方案。直接用 display: inline-flex 或 display: grid 更可靠：
-
inline-flex父元素自动包裹子项，justify-content: center水平居中，无需fit-content -
grid下justify-content: center同样生效，且天然不塌陷 - 浮动在响应式、多列自适应场景下极易失控，而 flex/grid 的
gap、flex-wrap、auto-fit等特性更可控
真正容易被忽略的，是把“清除浮动”和“居中”当成一个操作来处理——它们是两个独立步骤，顺序不能颠倒，且 fit-content 只参与后半程。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
