浮动元素无法通过vertical-align垂直对齐，因其仅适用于行内、表格单元格和Flex项目；应改用Flex布局（如display:flex;align-items:center）或table-cell模拟对齐，并注意清除浮动避免高度塌陷。
浮动元素的垂直对齐不能通过 vertical-align 属性直接控制，因为该属性仅对行内元素、表格单元格（table-cell）和 Flex 项目有效，而对浮动元素无效。浮动设计初衷是实现文字环绕图像等排版效果，其布局机制脱离了常规的行内对齐逻辑。要实现类似“垂直对齐”的视觉效果，需借助其他 CSS 技巧。
理解浮动与 vertical-align 的关系
很多开发者误以为 vertical-align 能控制浮动块的垂直位置，但实际上一旦元素设置 float:left 或 float:right，它就不再受 vertical-align 影响。这是因为浮动元素会脱离标准文档流，并形成块级框，参与的是块级布局而非行内对齐。
替代方案：使用 Flex 布局实现精准对齐
现代布局推荐使用 Flexbox 替代传统浮动。通过将父容器设为弹性布局，可轻松实现子元素的垂直居中或对齐：
- 设置父元素 display: flex;
- 使用 align-items 控制交叉轴对齐（如 center、flex-start、flex-end）
- 保留 justify-content 管理主轴方向排列
例如：
立即学习“前端免费学习笔记（深入）”；
.container {
display: flex;
align-items: center; /* 垂直居中 */
}
.left-box {
float: none; /* 不再需要浮动 */
}
.right-text {
margin-left: 10px;
}
兼容性处理：使用 table-cell 模拟对齐
在不支持 Flex 的旧环境中，可利用 display: table-cell 和 vertical-align 配合实现类似效果：
- 将两个并列块设为 display: table-cell;
- 在父级设置 display: table-row;
- 对子元素使用 vertical-align: middle;
这种方式能有效实现同排元素的垂直居中，且兼容 IE8+。
高度匹配技巧：消除浮动带来的高度塌陷
当多个浮动元素高度不一时，可能出现容器高度计算异常。可通过以下方式修复：
基本上就这些。虽然浮动曾是网页布局的核心手段，但在现代开发中，更建议用 Flex 或 Grid 实现结构化对齐需求，不仅代码简洁，响应式表现也更稳定。
