微信小程序不支持 float，因其渲染层默认使用 flex 布局，导致 float 和 clear 声明被直接忽略；图文环绕应改用 flex 或 inline-block 实现，迁移旧代码需重点排查依赖浮动的 js 逻辑。

微信小程序里写 float 不仅没用，还会埋下点击失效、布局错位、调试困难的隐患——它在小程序的 Webview 渲染层被直接忽略，不是兼容性问题，是规范层面不支持。

为什么 float 在小程序里完全不生效

小程序底层使用的是 WebView（iOS WKWebView / Android X5 内核），但其 CSS 渲染行为严格遵循 W3C 标准，而 float 在 Flex/Grid 容器中本就会被忽略；更关键的是，小程序框架默认将页面根容器设为 display: flex 或类似布局上下文，子元素一旦进入该环境，float: left 等声明直接被浏览器丢弃，连 warning 都不报。

• 用开发者工具选中元素，在 “Computed” 面板里查 float 值，会显示 none（哪怕你写了 float: left）
• clear: both 同样无效——因为前面根本没有生效的浮动元素
• 部分旧版 X5 内核（如微信 8.0.22 之前）甚至对 overflow: hidden 触发 BFC 的行为也不稳定，导致你以为“清了浮动”，其实啥都没发生

写了 float 却发现点击区域消失或错位

这不是 JS 逻辑错了，而是元素视觉位置和实际 layout box 脱节：你写的 float 没起作用，但可能误加了 position: absolute 或 transform，又没配 z-index 或 touch-action，导致点击穿透或区域偏移。

WeChat Article Parser - 微信公众号文章解析

解析微信公众号文章，提取标题、作者、正文、图片等信息。用户发送链接（mp.weixin.qq.com）时触发，自动提取内容并可保存至飞书表格。

下载

• 检查目标元素是否被父容器的 overflow: hidden 裁剪（尤其带圆角、阴影时）
• 确认没有同时设置 float 和 display: flex ——后者会彻底压制前者，且部分安卓机型会因此重绘异常
• 用 WXML 查看该节点是否被 hidden="{{true}}" 或 style="opacity: 0" 隐式隐藏，这类状态不会影响 float 计算，但会让点击失效看起来像“浮动干扰”

想实现图文环绕？别硬套 float

小程序不支持 shape-outside，也没有原生图文绕排机制。试图用 float: left + text-align: justify 模拟，结果文字要么堆成一团，要么留大片空白。

• 真要图文混排，改用 display: inline-block + vertical-align: top 控制图片与文字基线
• 更稳妥的做法：把图和文包进一个 view，用 flex-direction: row + flex: 1 分配空间，再用 word-break: break-word 控制换行
• 若需多段文字环绕单图，必须拆成多个 text 节点，分别控制宽度和 margin，不能依赖浮动自动推挤

迁移老代码时最易忽略的 JS 依赖

很多小程序是从 H5 改过来的，JS 里藏着靠 offsetTop、getBoundingClientRect() 读取浮动后位置的逻辑。一旦去掉 float，这些值全变，但错误不报在控制台，只体现在滚动错位、吸顶失效、tabbar 高度计算偏差上。

• 搜索代码中所有 .getBoundingClientRect() 调用，确认是否假设了“浮动后元素脱离文档流”
• 检查是否用 document.querySelectorAll(".item:float") 这类非法选择器做过滤（小程序不支持伪类匹配浮动状态）
• 如果用了第三方 UI 库（如 WeUI），确认其 picker、popup 组件是否内部依赖 float 布局——这类组件在小程序里往往需要降级为 position: fixed + 手动计算坐标

真正麻烦的从来不是“怎么让 float 工作”，而是删掉它之后，那些原本靠它意外实现的定位、高度、顺序逻辑，突然全部失准。动手前先 grep 一遍项目里的 float、clear、overflow: hidden，比调样式更关键。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！