CSS浮动布局在微信内置浏览器错版，根本原因是X5（Android）和WKWebView（iOS）内核对float的解析与标准不一致：父容器高度塌陷、clear: both失效、文字环绕异常；旧基础库（2.17.x前）BFC触发不可靠，混用inline-block更易换行；真机调试需启用“真机调试2.0”才可见真实渲染树；推荐改用display: flex或display: flow-root替代。
CSS浮动布局在微信内置浏览器错版，大概率不是代码写错了，而是浏览器解析行为和现代标准不一致——尤其在旧版基础库（2.18.1 以下）中，float + clear 的包裹逻辑、行盒重排、BFC 触发条件都和 Chrome 差异明显。
为什么 float 在微信内置浏览器里不生效或塌陷？
微信 Android/iOS 内置浏览器底层用的是 X5 内核（Android）或 WKWebView（iOS），但加了大量定制补丁，导致部分 CSS 渲染路径被绕过。典型表现是父容器高度塌陷、文字环绕失效、clear: both 不起作用。
- 旧基础库（
2.17.x及更早）对hasLayout类似机制支持不全，overflow: hidden有时无法触发 BFC -
display: inline-block和float混用时，X5 内核会错误合并匿名文本节点，导致换行异常 - 微信 8.0.6+（Android）和 8.0.8+（iOS）才完整支持
float: inline-start等新值，老版本只认left/right
真机调试时 float 布局错乱，inspect 看不到真实渲染树？
Chrome DevTools 连接微信真机后看到的 DOM 结构是“代理快照”，不是实时渲染树；X5 内核的 layout 阶段在客户端本地完成，DevTools 无法捕获 float 元素的最终几何位置。
- 必须开启「真机调试2.0」（开发者工具 1.05.2107221 RC+，点击左下角「切换真机调试2.0」）才能看到接近真实的 float 行盒计算结果
- 调试前先在页面顶部插入
<div style="border: 1px solid red; height: 0; clear: both"></div>，确认是否真塌陷——很多“错版”其实是父容器没撑开高度 - 禁用所有 transition / transform，它们会干扰 X5 对 float 元素的重排时机判断
float 替代方案：哪些写法在微信里更稳？
别硬扛 float，微信内建浏览器对 Flex 和 Grid 的兼容性远好于预期（基础库 2.18.1+ 已支持 display: flex 完整语法，包括 flex-wrap 和 align-content）。
立即学习“前端免费学习笔记（深入）”；
- 两栏布局：用
display: flex+flex: 0 0 200px替代float: left，避免清除浮动问题 - 图文环绕：改用
shape-outside+float: left组合（仅限 iOS WKWebView，X5 不支持），稳妥做法是用绝对定位 + padding 模拟 - 老项目不能大改？至少把
clearfix类换成display: flow-root（基础库2.20.0+支持，比overflow: hidden更干净）
最常被忽略的一点：微信 PC 版小程序窗口可自由缩放，但网页版仍按手机 UA 渲染；如果用了 @media (min-width) 切 float 布局，务必加 screen and (min-device-width) 限定，否则 PC 端会误触发移动端 float 规则。
