浮动布局已过时，动态计算宽度仅适用于ie9–10等遗留场景；getboundingclientrect()获取的宽度含padding/border且易致重排；resizeobserver对浮动元素基本无效；真正需js介入的仅限等高拉齐等css无法实现的极少数情况。
浮动布局在现代CSS中已经过时，但动态计算宽度仍可能有用
用 float 实现“动态内容浮动布局”本质上是逆潮流的——Flexbox 和 Grid 天然支持响应式、自适应、无需 JS 计算宽度的布局。如果你真遇到必须用 float 的遗留场景（比如老系统兼容 IE9–10），那 JS 动态算宽不是“增强”，而是补救手段，且极易出错。
为什么 getBoundingClientRect() 算出来的宽度不能直接塞进 float 布局
浮动依赖的是文档流中的静态尺寸，而 JS 读取到的 getBoundingClientRect().width 包含了 padding、border、甚至可能受 zoom 或 subpixel 渲染影响；更关键的是，一旦你用 JS 改写 style.width，就破坏了浮动元素原本靠内容撑开的自然行为，容易触发重排抖动或父容器塌陷。
- 常见错误现象：
float: left元素突然换行，即使总宽度明明没超容器 - 根本原因：JS 设置的
width没同步处理box-sizing，导致 padding/border 被额外加进去 - 正确做法：如果非得设宽，优先用
calc(100% - Xpx)配合 CSS 变量，而非 JS 硬编码像素值 - 性能影响：在 scroll 或 resize 中反复调用
getBoundingClientRect()会强制同步布局，卡顿明显
resizeObserver 无法监听浮动元素尺寸变化
这是个常被忽略的坑：ResizeObserver 对 float 元素基本无效——因为浮动元素脱离标准文档流，其尺寸变化不触发父容器重绘，observer 很难捕获。你看到的“没反应”，不是代码写错了，是浏览器根本没上报。
- 使用场景：想让右侧浮动块随左侧内容宽度自动收缩？别指望
ResizeObserver - 替代方案：改用
display: inline-block+vertical-align: top，它仍在文档流中，ResizeObserver可正常工作 - 参数差异：
ResizeObserver的回调里拿到的contentRect宽高，对浮动元素常为 0 或旧值 - 兼容性注意：IE 完全不支持
ResizeObserver，若需兼容，只能降级用setTimeout+offsetWidth轮询（不推荐）
真正该用 JS 动态算宽的少数情况
只有当布局逻辑完全脱离 CSS 能力范围时，才值得 JS 下场——比如多列等高浮动卡片中，某列内容高度突变，需要 JS 手动拉齐所有列高度（此时宽度其实固定，算的是高度）。
- 示例场景：新闻列表中，标题+摘要+标签堆叠，每项高度不一，要求“视觉上左右两列顶部对齐、底部拉平”
- 实操建议：用
Math.max(...items.map(el => el.offsetHeight))算出最高列，再统一设min-height，而非改width - 容易踩的坑：直接设
height会截断内容；应设min-height并确保overflow: visible - 更稳做法：放弃 float，改用
display: grid; grid-template-columns: 1fr 1fr;，等高是默认行为
事情说清了就结束。浮动布局本身不支持“动态内容驱动宽度”，所谓动态，其实是用 JS 在补 CSS 不该承担的职责。真正复杂的地方不在怎么算宽，而在怎么判断——这个需求，是不是从一开始就不该用 float。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
