浮动元素不设width时默认收缩到内容宽度；需移除width声明、用fit-content显式控制、父容器触发BFC（推荐flow-root）、避免clear错位，vertical-align无效。
浮动元素不设width时默认收缩到内容宽度
只要不给 float 元素显式设置 width，它就会自动收缩包裹内容，这是浏览器原生行为。比如一个 span 加了 float: left，但没写 width，它的宽度就由文字、内边距和边框共同决定。
常见错误现象：写了 float: left 却还留着 width: 100% 或 width: 200px，结果内容很短但盒子撑满或固定死——这完全抵消了“自适应”的意图。
- 确保移除所有
width声明（包括width: auto这种冗余写法） - 若内容含长单词或 URL，加
word-break: break-word或overflow-wrap: break-word防止溢出 - 避免在浮动项上设
display: inline-block—— 它会干扰 float 的尺寸计算逻辑
用 fit-content 显式声明收缩行为（现代推荐）
width: fit-content 比依赖隐式行为更可控，它明确告诉浏览器：“按内容最小所需宽度来定”，且兼容主流现代浏览器（Chrome 64+ / Firefox 58+ / Safari 15.4+）。
使用场景：标签云、筛选按钮组、动态生成的 badge 等——每个项文字长度不一，又需保持紧凑排列。
立即学习“前端免费学习笔记（深入）”；
- 写法：
width: -moz-fit-content（Firefox） +width: fit-content（其他）双写保兼容 - 搭配
min-width: min-content可兜底防过窄（例如空格分隔的单字导致宽度塌缩） - IE 完全不支持，降级方案是
display: inline-block; zoom: 1（仅限旧项目）
父容器必须触发 BFC 才能正确包裹浮动子项
浮动元素脱离文档流，父容器若不建立 BFC，高度会坍塌，看起来像“没包住”——这不是宽度问题，而是容器失效。
推荐优先用 display: flow-root，它专为解决此问题设计，无副作用；overflow: hidden 虽常用，但会意外裁剪 position: absolute 子元素或阴影。
-
display: flow-root是最干净的选择，兼容性已覆盖当前主力浏览器 - 避免用
float自身触发 BFC（如给父元素也加float），会把整个容器拖出文档流，影响后续布局 - 不要依赖
::after清除浮动来“撑高”父容器——它只解决清除问题，不保证 BFC 行为稳定
多行浮动项换行错位？别靠 clear 控制“行结束”
当浮动项高度不一致时，第二行首项容易卡在第一行较短项右侧，形成阶梯状错位。这不是 bug，而是 float 的自然行为：它只找“最近的左/右边界”对齐。
试图用 clear: left 强控每一项或插入 clear: both 分隔符，会导致响应式断点下难以维护，且在内容动态增减时极易失控。
- 真正可靠的做法：让每行自然换行——靠控制项宽（如
max-width: 200px）+ 容器宽度限定 - 若必须严格对齐底部，改用
display: flex; flex-wrap: wrap，float 不适合这类需求 - 注意
vertical-align对 float 元素无效，删掉任何相关设置
