float布局不推荐因它本为图文环绕设计，强行用于页面布局需大量补丁且易塌陷错位；Flexbox是专为布局设计的现代方案，支持稳定、代码简洁、功能强大。
为什么 float 布局现在不推荐用了
因为 float 本意是让文字环绕图片（比如新闻稿里左图右文），不是为页面整体布局设计的。强行用它做多列、居中、响应式，得靠 clear、overflow: hidden、负 margin 等“补丁”来收尾，稍一改动就容易塌陷、错位、换行异常。
Flexbox 是专门解决这类问题的布局模型，浏览器支持已非常稳定（IE10+ 支持部分特性，现代项目基本可忽略 IE9 及以下）。
用 display: flex 替换 float 的三步操作
把原来用 float: left / float: right 排列的容器，改成 Flex 容器即可，不需要改子元素的 float 属性——直接删掉它们。
- 给父容器加
display: flex - 删掉所有子元素上的
float、clear、margin（用于模拟间隙的） - 用
justify-content控制主轴对齐（如justify-content: space-between替代左右浮动 + 手动留白） - 用
align-items控制交叉轴对齐（如align-items: center一行内垂直居中，不用再算line-height或margin-top）
示例：原 float 导航栏
立即学习“前端免费学习笔记（深入）”；
.nav {
overflow: hidden;
}
.nav-item {
float: left;
margin-right: 20px;
}→ 改成：
.nav {
display: flex;
justify-content: flex-start; /* 或 space-around / space-between */
align-items: center;
}
.nav-item {
margin-right: 20px; /* 保留间距，但不再依赖 float */
}float 常见场景的 Flexbox 对应写法
很多老项目里 float 被用来实现特定效果，这些都有更干净的 Flex 替代方案：
- 左右两栏布局（左窄右宽）→ 父容器
display: flex，左栏设flex: 0 0 200px，右栏flex: 1 - 水平居中多个按钮 →
justify-content: center，无需text-align: center+float+clear - 底部固定栏（footer 粘底）→ 需配合
flex-direction: column和margin-top: auto，比position: absolute+bottom: 0更可靠 - 等高列（如图文卡片并排）→ Flex 默认交叉轴拉伸，子项高度自动一致，不用
min-height或 JS 补齐
兼容性和容易踩的坑
IE10–IE11 对 Flex 的支持有细节差异，比如不支持 flex: 0 0 auto 中的 auto，建议写成 flex: 0 0 100% 或具体值；align-items: stretch 在某些旧版本里可能失效。
最常被忽略的一点：Flex 容器默认是单行的（flex-wrap: nowrap），如果子元素总宽度超了容器，它们会强行压缩甚至溢出——而 float 会自然换行。需要换行时，必须显式加 flex-wrap: wrap。
另外，float 元素会脱离文档流，而 Flex 子项仍在流内（只是渲染方式变了），所以不要指望用 float 的“文字环绕”效果去套 Flex —— 那属于完全不同的使用场景。
