清除浮动后元素不居中，是因为浮动导致父容器塌陷且元素脱离文档流，使 margin: 0 auto 失效；正确做法是将居中元素置于独立BFC容器中并设置明确宽度和 margin: 0 auto。
清除浮动后元素不居中，是因为 float 脱离文档流
浮动元素（float: left 或 float: right）会脱离正常文档流，导致父容器高度塌陷，同时后续块级元素无法通过 margin: 0 auto 居中——因为此时它已不是“块级上下文中可居中的常规流元素”。你看到的“居中失效”，本质是清除浮动没恢复布局上下文，而非居中写法本身错了。
用 clear: both 清除浮动后仍需确保元素在文档流中且宽度可控
单纯加 clear: both 只是让后续元素避开浮动区域，但它本身不解决“如何让一个块级元素水平居中”这个独立问题。关键条件有三个：display 是 block（或 inline-block/ flex 等）、width 有明确值（非 auto）、左右 margin 设为 auto。
-
margin: 0 auto对display: block元素生效，但前提是它没被浮动、绝对定位或 display 设为table以外的特殊值 - 如果清除浮动的是父容器（如用
::after伪元素），子元素居中写法不变；如果清除的是兄弟元素，则要确认目标居中元素是否还在正常流中 - 常见误操作：给浮动元素自己加
margin: 0 auto—— 它无效，因为浮动元素的margin不触发居中逻辑
推荐方案：用 BFC 容器包裹 + 块级居中（兼容性好）
最稳妥的做法不是“在浮动元素上居中”，而是把需要居中的内容放进一个独立的、触发 BFC 的容器里，让它不受浮动影响。比如：
<div class="clearfix"> <div class="float-left">左浮动</div> <div class="float-right">右浮动</div> </div> <div class="center-box">我要居中</div>
.center-box 的样式应为：
立即学习“前端免费学习笔记（深入）”；
.center-box {
width: 300px; /* 必须设宽 */
margin: 0 auto; /* 关键 */
display: block; /* 确保是块级 */
}- 不要试图让
.clearfix内部某个子元素靠margin: 0 auto居中——除非它本身没浮动且父容器宽度明确 - 若必须在浮动兄弟元素同级居中，可用
display: table+margin: 0 auto，但 IE8+ 才支持；更现代的替代是display: flex父容器 +justify-content: center，但要注意老浏览器兼容性 - 用
text-align: center只对 inline / inline-block 子元素有效，对块级子元素无效——别乱套
现代写法优先考虑 Flex，但得清楚它和浮动不共存
如果你用 display: flex 布局，就别混用 float。Flex 容器内的项目自动忽略 float 声明，float 在 flex item 上完全无效。所以：
- 想居中？直接用
display: flex+justify-content: center，父容器设宽或不限宽都行 - 已有浮动代码要迁移？先移除所有
float，再统一用 flex 或 grid，否则行为不可预测 - 清除浮动的
clearfix类在 flex 容器里毫无意义——flex 本身不塌陷
真正容易被忽略的点是：清除浮动只是“收尾动作”，不是布局方案。居中与否，取决于元素自身的 display 类型、宽高设置和所处上下文，跟有没有清除浮动没有直接因果关系。
