浮动元素脱离行内格式化上下文（ifc），导致后续文字换行并失去text-align控制；clear仅强制避开浮动、不恢复对齐逻辑，需改用inline-block或包裹容器+margin:0 auto实现居中。
浮动元素后文字不居中，是因为它根本不在同一行内格式化上下文里
你给父容器设了 text-align: center，但里面有个 float: left 的图片或盒子，后面跟着一段文字——结果文字还是靠左。这不是 text-align 失效，而是那段文字已经“被挤到下一行”，且不再和浮动元素共享同一行内格式化上下文（IFC）。text-align 只对参与当前 IFC 的行内内容起作用，而浮动元素脱离了 IFC，后续普通文字会绕流、换行，甚至形成新的块级上下文。
clear 不是用来“修复居中”的，它是用来重置换行起点的
clear 的唯一作用是让元素**避开前面的浮动**，强制换到浮动元素下方开始布局。它不会把文字拉回上一行，也不会让文字响应 text-align。常见误操作：
- 给文字容器加
clear: both→ 文字确实掉下来了，但仍在左对齐，因为此时它已是一个独立块，text-align: center对它自身有效，但你没给它设宽度或没确认父容器是否撑开 - 给浮动元素自己加
clear: left→ 完全无效，clear不作用于触发浮动的元素本身 - 用
::after清除浮动但父容器没触发 BFC（比如缺overflow: hidden）→ 父容器高度仍为 0，text-align失去作用范围
想让文字“看起来居中”，得先让它回到可被 text-align 控制的位置
有两条实际路径：
- 去掉浮动：把图片或图标改成
display: inline-block，再配合父容器text-align: center，文字自然随行内流居中 - 保留浮动但控制文字容器：给文字外层包一个
div，设width: fit-content或固定宽 +margin: 0 auto，并确保该容器在清除浮动后能正确渲染（即父容器已触发 BFC）
注意：clear 只解决“位置错乱”，不解决“对齐逻辑”。真正卡住人的，往往是混淆了「文档流重排」和「文本对齐」这两个不同层级的机制。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
