浮动不能用于垂直居中，因其仅控制水平流向、不参与垂直定位；现代替代方案包括flex、absolute+transform、grid等。

浮动根本不是为垂直居中设计的，它连“垂直方向”都不参与控制 —— 所以你用 float 去尝试垂直居中，本质上是在用错工具。

float 只影响水平流向，不触发垂直位移

浮动的本质是让元素“贴边漂浮”，然后让**后续的文本流绕开它**。这个行为只在行内方向（left/right）生效，浏览器不会计算或调整它的垂直位置：

• float: left 和 float: right 都只会把元素推到容器顶部边缘，然后横向靠齐
• 没有 float: top 或 float: center 这种值 —— CSS 规范里压根没定义过垂直浮动
• 即使父容器有高度，浮动子元素也不会“感知”垂直空间，更不会居中对齐

为什么初学者常误以为 float 能“布局”？

过去用 float 做多栏布局，是因为它能让多个块级元素并排（比如左浮动两个 div），但这只是“水平排列”的副作用，并非真正可控的布局模型：

• 浮动元素脱离文档流，父容器高度塌陷（height: auto 下变 0），必须手动清除（clear）或触发 BFC
• 无法控制对齐方式：不能 vertical-align，不能 justify-content，也不能等高
• 响应式下极易错位 —— 因为浮动依赖固定宽高和顺序，一旦视口变小，元素会换行但顶边对齐规则混乱（比如后一个浮动块顶边不能高于前一个）

真正该用什么替代 float 实现垂直居中？

如果你的目标是让某个元素在父容器里垂直（且水平）居中，float 不是选项，而是干扰项。现代方案直接、可靠：

立即学习“前端免费学习笔记（深入）”；

• 单元素居中：display: flex + align-items: center + justify-content: center
• 绝对定位居中：position: absolute + top: 50% + left: 50% + transform: translate(-50%, -50%)
• Grid 居中：display: grid + place-items: center
• 纯文本行内居中：用 line-height 匹配容器高度（仅限单行）

注意：如果页面里已有 float 元素，强行加居中逻辑往往导致冲突 —— 比如 float 和 position: absolute 同时存在时，后者可能脱离预期上下文；又或者 flex 容器里还留着 float，会导致该子元素被忽略（float 在 flex/grid 容器中无效）。

最容易被忽略的点：float 的“图文环绕”语义仍在生效

哪怕你只是给一个图标加了 float: left，浏览器依然会按原始设计意图处理：让后续文本内容绕开它。这意味着：

• 如果后面跟的是 p 或 span，文字真会贴着图标右侧排版 —— 这不是 bug，是 feature
• 如果后面是另一个 div（非 inline），它会无视浮动元素位置，“直接上浮”填补文档流空缺，造成视觉错位
• 这种行为在现代组件化开发中极难预测，尤其当 DOM 动态插入、CSS-in-JS 注入时，绕行逻辑可能突然失效或过度生效

所以，除非你在写新闻正文、博客文章这类明确需要“图左文右/图右文左”的排版，否则别碰 float —— 它不是布局退路，而是特定语义的遗留接口。