float 本身不响应 CSS 变量变化，需将 var(--col-width) 显式写入 width 等触发布局的属性；float: var(--side) 语法非法，应保持 float 静态声明；现代布局推荐 Grid 或 Flex 替代。
float 不能直接响应 CSS 变量变化
你改了 --col-width，但 float: left 的元素没跟着变宽？不是变量没生效，是 float 本身不监听自定义属性——它只认死值（如 width: 200px 或 width: var(--col-width)），但一旦设完，后续变量更新不会触发重排。
常见错误现象：float 元素宽度卡在初始计算值，resize 或主题切换后列宽僵住；用 JS 改 style.setProperty('--col-width', '300px') 完全没反应。
- 必须把
var(--col-width)显式写进能触发布局的属性里，比如width、max-width -
float自身不能用var()，但它的“依赖属性”可以：只要width动了，float行为自然跟着变 - 别试图给
float写float: var(--side)——语法非法，浏览器直接忽略
用 width + float 实现列宽动态浮动布局
核心就一条：让浮动元素的 width 绑定变量，float 保持静态声明。这样变量一更新，宽度重算，浮动容器自动重新折行。
使用场景：后台多栏仪表盘，用户拖拽调整侧边栏宽度；暗色/亮色主题切换时同步缩放卡片列宽。
立即学习“前端免费学习笔记（深入）”；
section.card-grid {
--col-width: 280px;
}
.card-grid .card {
float: left;
width: var(--col-width); /* 关键：这里驱动变化 */
margin-right: 16px;
margin-bottom: 16px;
}- 必须加
margin-right配合float，否则最后一列可能被挤到下一行（尤其当容器宽度不能整除var(--col-width)时） - 如果列数固定为 3，建议用
calc((100% - 2 * 16px) / 3)替代var(--col-width)，避免手动算像素导致溢出 - IE 不支持
var()，若需兼容，得用 JS 注入内联样式或 fallback 值：width: 280px; width: var(--col-width);
clear 与 float 变量联动时的塌陷风险
浮动元素宽度变大后，可能撑开父容器高度，也可能让 clear: both 的清除元素错位——这不是变量的问题，是浮动脱离文档流后，父容器无法感知子元素真实高度。
错误现象：调大 --col-width 后，底部按钮突然跑到卡片中间；或者清除元素没顶到最底，留白异常。
- 别依赖
clear来撑高父容器，用overflow: hidden或display: flow-root更可靠 - 如果必须用
clear，确保清除元素在 HTML 中位于所有浮动元素之后，且它的width也绑定同一变量（否则宽度不匹配会错位） - 变量值设得过大（比如
--col-width: 100vw）时，单个浮动元素独占一行，clear位置逻辑会变，要提前测边界值
现代替代方案比 float + var 更稳
如果你真需要“列宽随变量动态浮动”，大概率说明你在用过时布局模式。CSS Grid 和 Flex 都原生响应变量，无需 hack。
性能影响：float 触发重排成本高于 Flex/Grid 的重绘；兼容性上，Grid 在 Safari 10.1+、Chrome 57+ 已无硬伤。
- Grid 示例：
grid-template-columns: repeat(auto-fill, minmax(var(--col-width), 1fr))—— 变量改，列数和宽度自动适应 - Flex 示例：
flex: 0 0 var(--col-width)+flex-wrap: wrap，比float更易控间隙和对齐 - 如果必须保 float（比如 legacy IE 支持），那就接受它“只适合静态列宽”的事实，变量只用于降级时的视觉微调，别指望它做响应式主力
变量本身没问题，问题在于 float 的机制和现代动态需求根本不在一个节奏上——卡点永远在重排时机和父容器高度感知上，不是写法不够巧。
