vertical-align 对浮动元素无效，因其已脱离行内上下文；仅对 inline、inline-block、table-cell 元素生效。清除浮动（clear）不恢复行盒参与能力，须改用 inline-block+vertical-align 或 flexbox（align-items: center）实现垂直对齐。
vertical-align 对清除浮动后的元素无效，因为它们已脱离行内上下文
vertical-align 只对 inline、inline-block、table-cell 元素生效。一旦元素应用了 float: left 或 float: right，它就脱离常规文档流、生成独立 BFC，并退出父容器的行盒（line box）排列体系——此时 vertical-align 完全被忽略，无论是否加了 clear。
常见错误现象包括：
-
.item { float: left; vertical-align: middle; }—— 样式存在但视觉零变化 - 给父容器设
line-height: 60px，只撑开文字行高，不影响已浮动子元素位置 - 用
margin-top手动推高，会导致后续浮动元素错位或换行，高度不可控
clear 属性本身不恢复 vertical-align 的作用条件
clear 的作用是让元素避开前面浮动兄弟元素的边界，从而“换行”或“下移”，但它不会让该元素重新进入行内上下文，也不会改变其 display 类型或参与 line box 的能力。所以即使你写了 clear: both，该元素仍是块级、脱离流、无行盒关联——vertical-align 依然不适用。
关键点在于：
-
clear不等于 “取消 float”，它只是布局时的避让指令 - 要让
vertical-align生效，必须先移除float，再设为display: inline-block或table-cell - 如果父容器是
display: flex，子元素的float和clear都会被浏览器强制设为none，此时连clear本身也失效
替代方案：用 inline-block + vertical-align 模拟对齐
这不是在“修复”浮动，而是放弃浮动，改用行为可预测的布局方式。适用于导航栏、表单控件组等场景。
实操要点：
- 子元素必须移除所有
float声明，设为display: inline-block+vertical-align: middle - 父容器加
font-size: 0消除inline-block默认间距（约 4px） - 每个子元素显式设置
font-size（如14px），否则文本不可见 - 父容器需有明确高度（如
height: 48px），否则vertical-align: middle缺少参照基准
真正可靠的解法：直接用 Flexbox 替代
Flex 布局天然支持交叉轴对齐，align-items: center 就是为垂直居中设计的，无需 hack，也不依赖 line box。
注意细节：
- 父容器必须有明确高度（
height或min-height），否则无参照 - 子元素要清除
float，否则可能意外触发 BFC，干扰 flex 排列 - Flex 子项设
float或clear会被浏览器静默忽略，Computed 面板显示为not applicable - IE10+ 原生支持；若需兼容 IE9 及以下，应降级为
display: table-cell方案
最容易被忽略的是：vertical-align 的生效前提不是“有没有 clear”，而是“是否还在行内上下文中”。一旦 float 出现，这个前提就永久丢失了——修 clear 不解决问题，得换上下文。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
