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 */
}此时左右两个子元素（比如 <div class="left"> 和 <div class="right">）会自动水平分布、垂直居中。无需 float，也无需清除浮动。
-
justify-content: space-between—— 左右贴边，中间留空 -
justify-content: flex-start—— 都靠左，可用margin-left: auto推右元素 - 若需兼容 IE10+，注意加
-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（简单但可能截断阴影/下拉菜单） - 末尾加清浮元素：
<div style="clear:both"></div> - 用伪元素清除：
::after { content:""; display:table; clear:both; }
这些操作只是让父容器“撑开”，并不解决垂直居中本身——那还得靠上面提到的 line-height 或 transform。
真正省心的做法，还是放弃 float，拥抱 display: flex。那些“必须兼容 IE8”的场景，现在已极少需要主动考虑。
