现代圣杯布局应优先使用flexbox（ie10+需-ms-前缀），避免ie9及以下；grid仅适用于放弃ie的项目，因ie10–11不支持现代语法；float方案仅作兜底，兼容性决策应始于browserslist配置。
圣杯布局的浏览器兼容性问题，本质是“该用什么技术栈去实现它”——不是怎么修 float 的坑，而是直接避开它。
Flexbox 是现代圣杯布局的兼容底线
IE10+ 可用 display: flex，但必须加 -ms- 前缀；IE9 及以下不支持，不能硬上。关键不是“能不能用”，而是“要不要为 IE9 降级整个布局逻辑”。
-
flex-direction: column配合flex: 1实现 header/main/footer 垂直流，IE10+ 支持，无需 polyfill -
order属性在 IE10–11 中需写成-ms-flex-order，且只接受整数（不能写order: -1就完事） - 别依赖
flex-wrap: wrap做响应式换行——IE10 不识别，换行会失效，应改用媒体查询 +flex-direction: column
Grid 布局只适合明确放弃 IE 的项目
display: grid 在 IE10–11 中完全不支持，哪怕加前缀也无效。所谓“IE11 支持 Grid”是常见误解——它只支持过时的旧版语法（display: -ms-grid），且与现代 Grid 规范不兼容。
- 若目标浏览器含 IE11，
grid-template-areas等现代语法会彻底失效，页面直接退化为单列 - 用 Autoprefixer 无法生成可用的 IE Grid 补丁，因为规范断裂，不是加前缀能解决的
- 真正兼容 IE11 的 Grid 方案只有微软私有语法（
-ms-grid-column等），但需重写整套规则，维护成本远超收益
float + 负 margin 的老方案，现在只用于兜底或读旧代码
不是“还能不能用”，而是“值不值得花时间调”。它在 Chrome/Firefox/Edge 中能跑，但只要遇到以下任一情况，就会出问题：
-
min-width断点下，margin-left: -100%计算失准，侧边栏错位 - 父容器
overflow: hidden触发 BFC，但和某些动画库（如 GSAP）或滚动插件冲突，导致内容被裁切 - 使用
rem或视口单位（vw）设侧边栏宽时，负 margin 无法动态匹配，必须 JS 补偿
真正容易被忽略的点：兼容性决策不是从 CSS 开始的，而是从 browserslist 配置起步。写一句 "not IE 11" 比写十行 -ms- 前缀更有效——多数项目早已没必要扛着 IE11 跑圣杯布局。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
