浮动元素设 width: auto 无效，因其脱离文档流后仅包裹内容；真正实现自适应需让非浮动兄弟元素触发 bfc（如 overflow: hidden）来占满剩余空间。
浮动元素本身不参与文档流计算，width: auto 对它无效——你不能靠“让它自己填满剩余空间”来实现自适应。真正能达成效果的，是让**非浮动的兄弟元素**去占满剩余宽度，而浮动元素只是“占位”而已。
为什么 float 元素设 width: auto 没用
浮动元素一旦 float: left 或 float: right，就脱离标准文档流，其 width 行为退化为内容包裹（类似 display: inline-block），不会自动拉伸到父容器减去其他浮动元素后的剩余宽度。
-
width: auto在浮动上下文中 ≈ “刚好包住内容”，不是“填满可用空间” - 即使给浮动元素加
width: 100%，它也会按父容器全宽渲染，可能溢出或覆盖其他内容 - 想让它“自适应剩余宽度”，本质是误用了浮动的目的：浮动是为图文环绕、简易多栏排版设计的，不是为弹性布局
实际可行的替代方案：右侧用 overflow: hidden 触发 BFC
这是浮动布局中唯一稳定、轻量、兼容 IE8+ 的“伪自适应”写法，核心不是让浮动元素变宽，而是让它的兄弟块级元素避开它、占满剩余空间。
- 左侧元素必须
float: left+ 明确宽度（如width: 200px） - 右侧元素必须是块级元素（
display: block默认满足），且加overflow: hidden（或overflow: auto）——这是为了触发 BFC，使其形成独立渲染区域，自动绕开左侧浮动 - 右侧元素无需设
width，它会自然撑满父容器宽度减去左侧所占部分后的空间 - 不要给右侧也加
float，否则它会脱离流、贴右边界，中间留白
示例：
.parent { width: 100%; }
.left { float: left; width: 200px; }
.right { overflow: hidden; } /* 关键：不设 width，也不 float */
更现代、更可靠的做法：别用 float，改用 flex 或 grid
如果你的目标是“左定宽、右自适应”，浮动方案本质是 hack，维护成本高、语义弱、响应式难处理。直接换布局模型更省心。
- flex 布局：
.parent { display: flex; }，.left { flex: 0 0 200px; }，.right { flex: 1; } - grid 布局：
.parent { display: grid; grid-template-columns: 200px 1fr; } - 两者都无需清除浮动、无需触发 BFC、天然支持响应式（比如把
200px换成minmax(200px, 1fr)） - 兼容性上，flex 支持到 IE10+（需加
-ms-前缀），grid 支持到 IE10+（但仅旧语法；现代fr单位需 Edge 16+/Chrome 57+）
真正容易被忽略的点是：浮动布局里，“自适应”从来不是浮动元素自己的行为，而是靠另一个元素的 BFC 特性被动实现的。一旦你试图在浮动元素上做 width 计算或百分比尝试，基本就走偏了方向。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
