flex布局在现代浏览器中更优但需按目标环境选择：chrome/firefox/safari/edge原生支持，ie11需-ms-前缀且不支持gap；float兼容老版本但维护成本高、功能受限；混合使用float与flex易引发布局异常。
Flex 布局在绝大多数现代网页场景中更好，但“更好”不等于“无条件替换”——关键看目标浏览器范围和具体功能需求。
Flex 在 Chrome/Firefox/Safari/Edge 100% 可用，IE11 需补前缀
主流现代浏览器（Chrome 29+、Firefox 20+、Safari 6.1+、Edge 12+）对 display: flex 支持完整，无需 polyfill。但 IE11 是分水岭：
-
flex: 1必须写成-ms-flex: 1，否则子项不伸缩 -
flex-wrap: wrap在 IE11 中支持，但gap完全无效，得用margin模拟 - IE10 仅部分支持，且必须加
-ms-前缀，align-items等属性行为不一致
Float 在 IE6 就能跑，但代价是维护成本翻倍
Float 兼容性确实宽得多：IE6–IE9 原生支持，连某些机顶盒 WebKit 内核都能解析。但问题不在“能不能显示”，而在“能不能稳”：
- 所有浮动容器都需手动处理高度塌陷，
overflow: hidden会裁剪position: absolute子元素（比如下拉菜单） - 响应式断点处，
float: none切换后常因 margin/border 计算误差导致最后一项掉行 - 等高列、垂直居中、顺序重排全部没有原生方案，只能靠 JS 或 hack（如负 margin + padding 大法）
兼容性决策不能只看“最低版本”，要看真实用户环境
判断依据不是“能不能支持 IE8”，而是“有没有真实用户在用 IE8 且必须交互”：
- 企业内网系统若明确要求 IE11 兼容，可放心用 Flex，但要补
-ms-前缀并禁用gap - 面向公众的营销页、后台管理界面，2026 年实际 IE11 占比已低于 0.3%，强行保 IE10 反而拖慢开发节奏
- 邮件模板（HTML email）仍是 float + table 的天下，因为 Outlook Desktop 等客户端几乎不识别
display: flex
真正容易被忽略的是：混合使用比全用 float 更危险
很多老项目边加 display: flex 边留着 float: left，结果是：
- 浏览器优先执行
float，再套 flex 排列，子项错位、换行失效 - 清除浮动逻辑（如
.clearfix）和 flex 容器共存，造成 margin 合并异常或伪元素干扰尺寸计算 - 动画性能下降：float 元素位置变化触发重排，flex 项又因未设
min-width: 0导致反复测量文本宽度
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
