浮动降级必须裸写在@supports外，因ie8–ie10不识别该语法；混用float与flex时float自动失效；android 4.3及更早webview完全不识别flex，需结构或js降级。
为什么不能用 @supports (display: flex) 包裹浮动降级样式
因为 IE8–IE10 这类目标浏览器根本不认识 @supports 语法，整条规则会被直接忽略，你写的 float: left 根本不会生效，页面直接退化成默认文档流，布局碎裂。这不是兼容性问题，是语法不可见——就像给盲人发二维码。
更糟的是，现代浏览器（Chrome 28+、Firefox 22+）虽支持 @supports，但它们全支持 display: flex，所以 @supports not (display: flex) 永远不触发，浮动样式压根没机会执行。
结论很直接：浮动降级必须“裸写”，放在所有 @supports 块之外，确保 IE8 也能解析到。
浮动降级必须显式声明 display: block 和清除逻辑
只写 float: left 不够。旧浏览器（尤其是 IE8）对浮动元素的盒模型计算非常脆弱，缺了 display: block 容易触发 inline 元素的基线对齐错乱，导致高度塌陷或文字错位。
- 每个浮动子项都要加
display: block和明确宽度（如width: 33.333%），不能依赖flex: 1 - 父容器必须主动清除浮动：
overflow: hidden或用伪元素::after（content: ""+clear: both） - 避免用
clear: both放在浮动元素之后的空标签里——微信 X5 内核 v6.x 前会失效
float 和 flex 混用时，子元素的 float 属性会被强制设为 none
这是 CSS 规范行为，不是 bug。只要父容器是 display: flex，它的直接子元素的 float 就自动失效，DevTools 的 Computed 面板里会显示 not applicable。
如果你发现按钮没左对齐、clear 不起作用、父容器高度异常，先检查父级是否用了 display: flex。临时删掉它，如果布局立刻恢复，就是混用冲突。
正确做法是：
- 单个元素右对齐 → 改用
margin-left: auto - 左右分栏 → 改用
justify-content: space-between - 需要保留旧浮动结构 → 把浮动区域包一层
<div class="legacy-wrapper">，给 wrapper 加 <code>overflow: hidden形成 BFC，再把这个 wrapper 当作 flex 项目Android 4.3 及更早 WebView 中，
flex不是“不兼容”，而是“完全不识别”这类内核连
display: -webkit-flex都不认，Autoprefixer 补的前缀毫无意义。你写的flex: 1在 Android 4.2 上等于没写，子元素直接塌成 0 高度。这时候不能靠 CSS 降级，必须改 DOM 结构或 JS 补位：
- 关键容器用
display: block+width+float显式控制 - 垂直居中不用
align-items，改用position: absolute+top: 50%+ 负margin-top（需固定高度） - 不要指望
@supports或 Modernizr 检测能覆盖这些内核——它们连matchMedia都可能不支持
真正容易被忽略的点是：旧安卓机上，浮动本身也常因视口缩放或硬件加速失效，所以降级方案得同时考虑 float 的稳定性——别把所有希望押在 float 上，必要时用
display: table-cell或 JS 动态计算宽高。 - 关键容器用
