float:left使元素宽度收缩是因触发“shrink-to-fit”规则，即脱离文档流后不再继承父宽，而按内容实际尺寸反推宽度；必须显式设置width（如calc或百分比配box-sizing:border-box）并配合bfc清除浮动才能实现稳定布局。
float:left 会让元素宽度收缩，是因为它触发了“shrink-to-fit”计算规则——浏览器不再按父容器宽度分配空间，而是根据内容实际尺寸反向推算宽高。
浮动元素默认不继承父容器宽度
普通块级元素（如 div）在文档流中默认 width: auto，实际表现为 100% 占满父容器；但一旦设置 float: left，它就脱离文档流，失去这个“自动撑满”的行为。浏览器不再参考父宽，转而用内容宽度 + 内边距 + 边框 + 外边距来反推最小可用宽度。
- 一段文字 + 一个小图标，
float: left后可能只占 68px，哪怕父容器有 1200px 宽 -
img元素浮动后也一样：没设width就按原始像素宽渲染，不会拉伸 - 这个行为不是 bug，是 CSS 规范明确规定的“shrink-to-fit”布局算法
为什么必须显式设置 width 才能稳定布局
没有 width 的浮动元素无法参与可靠的横向空间分配，尤其在多列并排时会直接导致错行、间隙不可控或右侧内容被挤到下一行。
- 两个
div都float: left，一个没设width，另一个设了width: 50%→ 前者缩成内容宽，后者占半屏，总宽远小于 100%，但视觉上完全不对齐 - 用
calc(50% - 10px)或百分比配box-sizing: border-box才能真正控制物理占用宽度 - 若依赖
min-width或max-width，也要注意它们只在width: auto时生效，而浮动后width: auto已不是“撑满”，而是“内容宽”
常见误判：以为 display:block 能恢复宽度
给浮动元素加 display: block 没用——float 本身就会强制转为块级，关键不在显示类型，而在是否脱离文档流及尺寸计算逻辑。
-
float: left+display: inline-block是非法组合，后者会被忽略 - 想让浮动元素“撑满剩余空间”，不能靠
width: 100%（它会按包含块宽度算，而包含块可能是视口或最近的 BFC 容器） - 真正有效的兜底方式是：父容器触发 BFC（如
overflow: hidden），再给浮动子项设明确width或用flex/grid替代
最易被忽略的一点：收缩不是发生在渲染后，而是计算盒模型阶段就决定了——你看到的“窄”，是浏览器在 layout 阶段就放弃继承父宽、改用内容驱动的结果，后续任何 margin/padding 调整都只是在这个已定窄宽基础上叠加。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
