浮动元素不设 width 时默认 shrink-to-fit，导致布局不稳定；必须显式设宽或改用 flex/grid。
浮动元素不设 width 时默认是 width: auto，它会收缩为内容宽度（shrink-to-fit），这不是 bug，而是规范行为；但会导致后续元素无法稳定绕排、布局错位或意外换行——必须显式控制宽度或改用现代布局。
为什么 width: auto 在 float 下等于“不可控”
普通块级元素的 width: auto 表现为填满父容器，但浮动元素不同：它脱离文档流后，width: auto 就退化为“刚好包住内容”，比如一段短文字撑开的宽度可能只有 80px，哪怕父容器宽 1200px。这带来三个实际问题：
- 后续块级兄弟元素（如
div）因无法感知剩余空间，常直接换行，而非紧贴浮动元素右侧排布 - 多个
float: left的导航项在响应式缩放时，某一项内容变长，整体宽度超限，整行突然折行 - 图文混排中，浮动图片未设宽，原始尺寸远大于容器，把右侧文字挤到下一行
处理方式：设固定宽、百分比或用 BFC 替代
不能依赖 width: auto 去“自适应”，得主动给约束：
- 两栏布局：左侧浮动栏写
width: 240px或width: 20%，右侧主内容用margin-left预留空间，或触发 BFC（如overflow: hidden）自动绕排 - 多列卡片：每个浮动项统一设
max-width: 250px+width: auto，再配合父容器overflow: hidden清除浮动，避免塌陷 - 真正需要弹性？别硬扛 float —— 改用
display: flex或display: grid，它们对width: auto的处理更可预测，且无清除浮动之苦
常见错误：以为 max-width 能替代 width
max-width 不是宽度控制器，它只设上限；没 width 时，浮动元素仍按内容收缩，max-width 几乎不起作用：
- 错误写法：
.item { float: left; max-width: 300px; }→ 元素可能只占 120px，max-width形同虚设 - 正确组合：
.item { float: left; width: 25%; max-width: 300px; }，或干脆去掉float，用flex: 0 0 300px - 若内容含长单词或 URL，还需额外加
word-break: break-word和min-width: 0（后者在 flex 场景才关键，float 中不适用）
float 的 width: auto 是历史包袱，不是设计优势；现在还用它，基本只为了兼容老项目或特殊图文环绕场景。真要写新布局，优先选 flex 或 grid——它们让“宽度可控”这件事回归常识，而不是靠猜和试。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
