在HTML5前端开发中，flex和float是两种常用的CSS布局方式，很多开发者在初期学习时容易混淆两者的使用场景和核心特性，下面将从多个维度详细对比两者的差异。
核心布局原理差异
float是CSS早期就存在的布局属性，最初设计目的是实现文字环绕图片的效果，后来被开发者用来做多列布局。它的核心原理是让元素脱离普通文档流，向左或者向右移动，直到碰到父容器边缘或者其他浮动元素。
flex是CSS3引入的弹性盒子布局模型，专门为解决复杂布局问题设计，核心原理是通过父容器设置display:flex成为弹性容器，直接控制内部子元素的排列、对齐和空间分配，不需要子元素脱离文档流。
基础使用代码对比
float实现水平排列
使用float实现三个div水平排列，需要给每个子元素设置float:left，同时父容器需要清除浮动避免高度塌陷。
/* 父容器样式 */
.float-container {
width: 100%;
/* 清除浮动 */
overflow: hidden;
}
/* 子元素样式 */
.float-item {
float: left;
width: 33.33%;
height: 100px;
background: #f0f0f0;
margin: 5px 0;
}
<div class="float-container">
<div class="float-item">float子项1</div>
<div class="float-item">float子项2</div>
<div class="float-item">float子项3</div>
</div>
flex实现水平排列
使用flex实现同样的效果，只需要在父容器设置display:flex即可，子元素会自动水平排列，不需要额外设置浮动和清除浮动。
/* 父容器样式 */
.flex-container {
display: flex;
width: 100%;
}
/* 子元素样式 */
.flex-item {
flex: 1;
height: 100px;
background: #f0f0f0;
margin: 5px;
}
<div class="flex-container">
<div class="flex-item">flex子项1</div>
<div class="flex-item">flex子项2</div>
<div class="flex-item">flex子项3</div>
</div>
核心特性差异对比
下面通过表格整理两者的核心差异点，方便开发者快速查阅：
| 对比维度 | float布局 | flex布局 |
|---|---|---|
| 文档流状态 | 子元素脱离普通文档流 | 子元素仍在普通文档流中 |
| 排列方向 | 只能水平向左或向右排列 | 支持水平、垂直双向排列，可通过flex-direction调整 |
| 对齐能力 | 没有内置对齐属性，需要额外计算margin实现 | 支持justify-content、align-items等属性快速实现各种对齐 |
| 空间分配 | 需要手动计算宽度，适配不同屏幕较麻烦 | 支持flex-grow、flex-shrink自动分配剩余空间，响应式适配更方便 |
| 高度影响 | 子元素高度不一致时容易出现布局错位 | 可通过align-items属性统一控制子元素高度对齐 |
| 清除浮动 | 父容器需要额外处理清除浮动，否则会出现高度塌陷 | 不需要清除浮动，父容器会自动被子元素撑开 |
适用场景差异
float布局更适合简单的文字环绕场景，或者需要兼容非常老旧的浏览器（不支持CSS3的场景）时使用，但是在复杂多列布局、响应式布局中维护成本很高。
flex布局几乎适用于所有现代页面的布局场景，尤其是需要灵活控制子元素排列、对齐、空间分配的场景，比如导航栏、卡片列表、居中布局等，开发效率更高，布局稳定性更好。
常见问题说明
很多开发者会问，是不是flex布局出现后就完全不需要用float了？其实不是，float的文字环绕特性是flex无法替代的，比如文章页中图片左侧文字环绕的效果，使用float实现会更简单。
另外需要注意，flex是CSS3的属性，如果需要兼容IE9及以下版本的浏览器，就不能使用flex，只能选择float或者其他传统布局方式。
总结
flex和float都是HTML5布局中常用的手段，核心差异在于设计初衷和特性支持。如果是现代项目开发，优先选择flex布局可以大幅降低布局难度，提升开发效率；如果是需要文字环绕效果或者兼容老旧浏览器，再选择float布局。开发者可以根据实际项目需求灵活选择，也可以两者结合使用，发挥各自的优势。