CSS Flex布局与Float布局，哪一种更适合满足现代网页的兼容性挑战？

本文共计721个文字，预计阅读时间需要3分钟。

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 内核都能解析。