浮动元素不支持垂直对齐，需借助其他CSS方法实现。1. 用line-height对齐单行文本；2. 结合vertical-align与伪元素模拟居中；3. 推荐使用Flexbox替代float；4. 绝对定位加transform精确控制。现代布局建议优先采用flex或grid以避免float局限。
浮动元素本身不支持垂直对齐的直接属性，因为 float 主要是为文本环绕和水平布局设计的。要实现浮动元素的垂直对齐，需要借助其他CSS技巧。以下是几种实用方法：
1. 使用 line-height 对齐单行文本
如果容器高度固定，且内容是单行文本，可以通过设置 line-height 等于容器高度来实现垂直居中。
例如：.container {
height: 50px;
line-height: 50px;
float: left;
}
.container span {
display: inline-block;
vertical-align: middle;
}
2. 使用 vertical-align 和伪元素模拟对齐
将浮动元素设为 inline-block，然后利用 vertical-align: middle 配合一个等高伪元素撑起居中效果。
示例代码：.parent {
font-size: 0; /* 消除间隙 */
}
.float-box {
display: inline-block;
vertical-align: middle;
width: 100px;
height: 50px;
float: none;
}
.parent::before {
content: '';
display: inline-block;
height: 50px;
vertical-align: middle;
}
3. 使用 Flexbox 替代 float（推荐）
虽然这不是“纯浮动”方案，但在现代布局中，用 Flex 更简洁可靠。可保留整体结构，仅对父容器使用 flex。
YDUI Touch专为移动端打造，在技术实现、交互设计上兼容主流移动设备，保证代码轻、性能高；使用 Flexbox 技术，灵活自如地对齐、收缩、扩展元素，轻松搞定移动页面布局；用 rem 实现强大的屏幕适配布局，等比例适配所有屏幕；自定义Javascript组件、Less文件、Less变量，定制一份属于自己的YDUI。
立即学习“前端免费学习笔记（深入）”；
替代方案：.flex-container {
display: flex;
align-items: center;
height: 100px;
}
.flex-item {
float: none; /* 不再需要 float */
}
4. 绝对定位 + transform 居中
适用于脱离文档流的情况，结合父级相对定位实现精确控制。
.relative-parent {
position: relative;
height: 100px;
}
.aligned-item {
position: absolute;
top: 50%;
transform: translateY(-50%);
float: none;
}
基本上就这些常见方式。虽然 float 在旧项目中仍存在，但现代开发更建议用 flex 或 grid 实现对齐，避免浮动带来的局限性。关键是理解垂直对齐的本质：不是 float 的职责，而是通过其他布局机制协同完成。不复杂但容易忽略细节。
