不能用@supports (display: flex)降级到float，因为IE10及更早版本既不支持@supports也不支持flex，会直接忽略整个@supports块，导致浮动样式无法生效；正确做法是将float降级样式裸写在@supports外层，确保IE8等旧浏览器可解析执行。
@supports (display: flex) 是无效检测方式，不能用于浮动布局降级 —— 因为 IE10 及更早版本既不支持 @supports，也不支持 display: flex，但它们会完整忽略整个 @supports 块，导致你写的浮动降级样式根本没机会生效。
为什么不能用 @supports (display: flex) 降级到 float
浮动（float）是给 IE6–IE9 准备的兜底方案，而这些浏览器连 @supports 语法都不认识。一旦你把 float 样式写在 @supports not (display: flex) 里面，IE 就直接跳过整块规则，页面变成默认流布局，彻底碎裂。
-
@supports not (display: flex)在 IE 中被当作非法 CSS，整条规则被丢弃，不执行也不报错 - 现代浏览器（Chrome 28+、Firefox 22+、Safari 9+）虽支持
@supports，但它们都支持flex，所以not (display: flex)分支永远不触发 - 真正需要
float的旧环境（如微信 X5 内核 v6.x 前、Android 4.4 WebView）也无视@supports not，因为它们根本不解析该语法
正确写法：浮动必须写在 @supports 外层，且用 display: block + float 组合
降级样式要“裸写”在最外层，确保所有浏览器（包括 IE8）都能读到；@supports 块只负责启用 flex，不参与兜底逻辑。
- 基础样式用
display: block+float: left+width+margin显式控制布局 - 必须重置
float后的清除问题：overflow: hidden或伪元素::after清除浮动 -
@supports (display: flex)块内只覆盖display、flex相关属性，不碰float、width等已有声明 - 避免使用
flex-wrap: wrap后再靠float模拟换行 —— 浮动无法自动折行，需手动分组容器
.grid-item {
display: block;
float: left;
width: 200px;
margin-right: 1rem;
}
.grid-item:nth-child(3n) { margin-right: 0; }
.grid { overflow: hidden; }
@supports (display: flex) {
.grid {
display: flex;
flex-wrap: wrap;
gap: 1rem;
}
.grid-item {
flex: 0 0 200px;
margin: 0;
}
}
遇到 inline-block 降级时要注意的坑
有些项目改用 display: inline-block 替代 float，看似简洁，但在 IE8–IE9 下有隐藏陷阱。
-
inline-block在 IE8 需加zoom: 1; *display: inline;触发 hasLayout，否则垂直对齐异常 - 文本节点间的空格会被渲染成 4px 左右间隙，不能只靠
font-size: 0解决 —— IE8 不支持子元素font-size继承重置 - 移动端 Safari ≤ 8.0 对
vertical-align: top解析不稳定，建议统一用top并补line-height: 0 - 若父容器设了
text-align: center，inline-block子项会居中，但flex分支里justify-content不会继承该行为，造成视觉偏移
真正需要关注的兼容边界不是 flex，而是 gap 和 flex-wrap
很多团队以为只要支持 display: flex 就万事大吉，结果在 Safari 10.1、iOS Safari 15.4 上发现子项紧贴或换行失效 —— 这些浏览器认 display: flex，但不支持 gap 或 flex-wrap: wrap 的某些值。
- 用
@supports (display: flex) and (gap: 1rem)检测gap更稳妥，但注意 Firefox ≤ 63 不支持该查询语法 - 更通用做法：外层用
margin模拟gap，@supports块内用gap覆盖并重置margin -
flex-wrap: wrap在 Android 4.4 WebView 中部分支持，但flex-basis计算错误，建议降级时固定子项width，不用flex: 0 0 auto
最易被忽略的一点：浮动降级必须和容器 min-width 配合。当 viewport 缩放或字体放大时，float 元素可能因内容撑宽而挤出容器，导致布局断裂。加一句 min-width: 0 在浮动项上，能强制截断长单词/URL，比依赖 JS 修复更可靠。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
