浮动会触发 shrink-to-fit 使元素按内容宽度自适应，而非撑满父容器；这是规范行为而非 bug，其宽度由内容、内边距、边框及 min-content 综合决定。
因为 float 会触发“包裹性”（shrink-to-fit），让元素放弃块级默认的 width: auto 行为，转而按内容宽度自适应——这是 CSS 规范定义的行为，不是 bug。
浮动为什么会改变宽度计算逻辑
块级元素在标准流中默认 width: auto，即尽可能撑满父容器；但一旦设置 float: left 或 float: right，它就脱离文档流，并进入一种“收缩包裹”模式：
- 浏览器不再按父容器剩余空间分配宽度，而是基于内容、内边距、边框、最小内联尺寸（
min-content）综合计算 - 这个过程叫 shrink-to-fit，是浮动元素的固有渲染规则
- 行内元素（如
<span></span>）浮动后也会变成块级框，但宽度仍由文字长度决定，看起来更“自然”
没设 width 的 div 浮动后只占 86px？这很合理
比如一个 <div>提交</div> 加了 float: left 却没写 width，它不会去抢父容器的 1200px，而是只取“提交”两个字加 padding/border 后的实际宽度（比如 86px）。这不是异常，是预期行为。
常见误判点：
立即学习“前端免费学习笔记（深入）”；
- 以为“没写 width 就该填满”，其实那是标准流下的规则，浮动已脱离该上下文
- 把视觉错位归咎于“浮动不自适应”，其实是兄弟元素还在按标准流布局，导致换行或挤压
- 用
vertical-align试图对齐浮动元素——它对float完全无效
父容器高度塌陷时，“自适应”会失效
当浮动子元素的父容器没触发 BFC，就会高度塌陷，此时子元素的尺寸计算可能异常：文字换行、内容被截断、看似“不随内容伸缩”。根本原因不是 float 本身，而是父容器失去了尺寸锚点。
解决方法很简单：
- 给父容器加
display: flow-root（推荐，语义清晰，溢出不裁剪） - 或
overflow: hidden（兼容老浏览器，但注意内容溢出会被隐藏） - 避免用
clear: both放在父容器外——那只能清浮动，不能修复父容器尺寸
想真正控制“内容宽度 + 边界”？别只靠 float
float 本身不提供宽度约束能力。如果你需要：
- 图标+文字组合严格贴合内容，但最小不小于 64px → 用
width: fit-content+min-width: 64px - 多个浮动项自动换行对齐（如标签云）→ 必须配合父容器 BFC，且单个项建议加
white-space: nowrap防意外折行 - 左右两个浮动元素对齐父容器两端 → 它们必须同属一个已触发 BFC 的父容器，且总宽度 ≤ 父宽，否则必然换行
现代项目里，float 已不适合做主布局。它的“自适应宽度”只是副产品，不是设计目标。真要动态响应内容，fit-content、inline-block 或直接上 flex 更可控——尤其是当你要处理空格、长单词、多语言文本时，float 的包裹逻辑很容易被边缘 case 打破。
