float 元素无法用 align-items: center 垂直居中，因其脱离文档流且不参与 Flex 布局；应改用 display: flex 配合 align-items: center 和 justify-content 实现左右并排与垂直居中。
float 元素无法用 align-items center 垂直居中
因为 align-items: center 是 Flexbox 的属性，只对 Flex 容器的**直接子元素**生效；而 float 会把元素脱离文档流，它既不响应父容器的 Flex 布局，也不参与 align-items 的对齐计算。强行在浮动元素上写 align-items 完全无效。
用 display: flex 替代 float 是最干净的解法
现代布局中，float 已基本被 flex 或 grid 取代。左右并排 + 垂直居中，用 Flex 一行代码就能搞定：
.container {
display: flex;
align-items: center;
justify-content: space-between; /* 或 flex-start / space-around */
}此时左右两个子元素（比如 这是退路方案，适用于老项目无法改结构或需兼容极旧浏览器。核心思路是：让行内级内容（如文字、行内块）在父容器中视觉居中。 立即学习“前端免费学习笔记（深入）”； 例如： 即使你坚持用 这些操作只是让父容器“撑开”，并不解决垂直居中本身——那还得靠上面提到的 真正省心的做法，还是放弃 float，也无需清除浮动。
justify-content: space-between —— 左右贴边，中间留空justify-content: flex-start —— 都靠左，可用 margin-left: auto 推右元素-ms-flex-align: center（但 IE 不支持 space-between 的完整行为）如果必须保留 float，只能靠 line-height 或 transform 模拟居中
line-height 等于高度 → 仅对单行文本有效transform: translateY(-50%) + top: 50% → 需要 position: relative 或 absolute
vertical-align: middle 配合 display: inline-block → 但会受换行/空白符影响，不稳定.float-wrapper {
height: 60px;
line-height: 60px; /* 文本类内容可居中 */
}
.left { float: left; }
.right { float: right; }别忘了清除浮动带来的布局塌陷问题
float，只要父容器没高度，它就会塌陷——这时 align-items 再怎么写也没意义，因为容器高度为 0。常见修复方式有：
overflow: hidden（简单但可能截断阴影/下拉菜单）
::after { content:""; display:table; clear:both; }
line-height 或 transform。float，拥抱 display: flex。那些“必须兼容 IE8”的场景，现在已极少需要主动考虑。
