Flexbox性能优于float但非绝对，关键在避免flex-shrink默认压缩、IE10/11补全-ms-flex、减少三层以上嵌套，并合理分配对齐职责。
Flexbox 渲染性能普遍优于 float，但“更好”不等于“无条件更快”——关键看是否触发了 flex-shrink 压缩、是否嵌套过深、以及是否在 IE10/11 中漏写 -ms-flex。
flex-shrink 默认开启是最大性能隐患
很多人发现加了 display: flex 后文字突然被压缩、图片变形、甚至横向滚动条意外出现，问题不在 flex 本身，而在 flex-shrink: 1（默认值）悄悄生效。浏览器会强制收缩子项来避免溢出，哪怕你写了 width: 300px，只要没显式设 flex-shrink: 0，它就可能被压窄。
- 固定宽侧边栏必须写：
.sidebar { flex: 0 0 240px; }（0 0分别对应flex-grow和flex-shrink） - 主内容区若含长 URL 或未换行文本，要加
min-width: 0防止整行被拉伸后反向压缩 - float 布局虽慢，但至少行为可预测；flex 的“弹性”一旦失控，调试成本远高于 float
IE10/11 中漏写 -ms-flex 会导致回退到 float 渲染路径
在 IE10/11 中，只写 flex: 1 不生效，浏览器会忽略该声明，子项按块级元素逐个堆叠，相当于降级为普通文档流——此时若父容器没设高度，又没清除浮动残留，反而更易塌陷、错位。这不是性能差，而是布局直接失效。
- 必须补全：
.item { -ms-flex: 1; flex: 1; } - 不能只靠 Autoprefixer：它不处理
flex: 1这类复合值的 IE 适配，得手动加 - 若项目仍需支持 IE11，建议用
@supports (display: flex) { ... }包裹 flex 规则，降级方案用 float 或display: table
过度嵌套 flex 容器比 float 更耗计算资源
三层以上 display: flex 嵌套（比如 .page > .main > .card-list > .card 全是 flex）时，浏览器需多次重排子项尺寸，尤其当内部有 min-width: 0 缺失或 overflow: hidden 混用，会触发额外布局测量。而 float 虽旧，但渲染路径简单，对静态结构反而更轻量。
立即学习“前端免费学习笔记（深入）”；
- 常见陷阱：
.card { display: flex; }内部又设.card-header { display: flex; }，再加一个.avatar { display: flex; } - 优化方向：非必要不嵌套；用
align-items/justify-content替代多层 flex；图标类小元素改用inline-flex或纯display: inline-block - float 在这种场景下没优势，但也不拖后腿；真正拖慢的是没想清楚“哪一层该负责对齐”
真正影响性能的从来不是“用了 flex 还是 float”，而是有没有让 flex 做它不该做的事——比如强行模拟文字环绕、在不可变宽容器里滥用 flex: 1、或把整个页面塞进四层 flex 里。这些地方，float 反而更老实。
