css浮动已退居图文环绕等辅助场景，flex布局因语义清晰、天然支持一维排列对齐、无塌陷问题且兼容性完善，成为现代多栏布局主流方案。
CSS 浮动（Float）曾是实现多栏布局的主力，但现在它基本只用于文字环绕图片这类原始设计场景；而 Flex 布局是专为一维布局（行或列）打造的现代方案，语义清晰、控制力强、无需额外修复，已成为主流选择。
浮动本不是为布局而生
float 最初的设计目的很单纯：让文字自然绕排在图片周围，类似报纸排版。开发者后来“借用”它来实现左右两栏、三栏等页面结构，属于功能上的迁移使用。这种“挪用”带来了不少副作用：
- 浮动元素脱离标准流，父容器高度塌陷，必须手动清除（如
overflow: hidden或伪元素::after） - 无法垂直居中，也不能等高对齐，要靠 hack 或 js 补救
- 响应式切换方向（比如移动端从横排变竖排）非常困难，常需重写结构
- 子元素必须显式设宽，否则容易错位，维护成本高
Flex 是为布局量身定制的
Flexbox 从诞生起就瞄准了“容器内子项如何排列、对齐、伸缩”这个核心问题。它不破坏文档流，天然支持：
- 单行/单列的一维布局，方向可随时切换（
flex-direction: column） - 任意方向的居中：
justify-content控制主轴，align-items控制交叉轴 - 子项自动等高，无需设置高度，也不怕内容长短不一
- 空间动态分配：
flex: 1自动填满剩余空间，flex: 0 0 200px固定不缩放 - 无塌陷问题——父容器天然包裹所有 flex 子项
兼容性已不再是障碍
现在主流浏览器（chrome、firefox、safari、edge）对 Flex 的支持早已完善，连 ios Safari 10.3+ 和 android Browser 4.4+ 都稳定支持。真正需要兼容 IE10/11 的项目虽仍存在，但可通过 Autoprefixer 自动补全前缀，或搭配简单降级方案处理，不再构成全面弃用 Flex 的理由。
立即学习“前端免费学习笔记（深入）”；
实际开发中，float 已退居辅助角色
今天还用 float 的典型场景只剩几个：
- 图文混排时让段落文字环绕头像或插图（配合
shape-outside效果更佳） - 维护老项目，且暂无重构计划
- 极简静态页，仅需左对齐几个小图标，懒得引入 flex
除此之外，用 float 做整体布局，等于主动给自己加调试负担和兼容包袱。