浮动块宽度异常缩小是因为脱离文档流后width自动收缩为内容宽度，而非被压缩；需先修复父容器高度塌陷、明确width依据、统一box-sizing并消除空格干扰。
浮动后块元素宽度异常缩小，根本不是“被压缩”了，而是它默认变成了 display: block 但脱离文档流后，**width 自动收缩为内容宽度**——尤其当没设 width、min-width 或父容器未触发 BFC 时，浏览器就按内容撑开，看起来像“缩窄”了。
没设 width 的浮动块会回退到内容宽度
这是最常被忽略的起点。浮动元素一旦脱离文档流，若没显式声明 width，它的宽度不再继承父容器，也不再默认占满一行，而是收缩成内部文本或子元素的实际宽度（shrink-to-fit behavior）。
- 例如：
<div class="item">短文本</div>+.item { float: left; }→ 宽度可能只有 40px - 加
width: 100%不一定有用：如果父容器高度塌陷（没清除浮动），100%是按 0px 高度算的，结果仍是窄条 - 验证方法：开发者工具选中该元素，在「Computed」里看
width值是不是远小于预期——如果是 auto 或具体像素值很小，就坐实了这点
父容器高度塌陷导致 width: 100% 失效
width: 100% 是相对于**包含块（containing block）的 width** 计算的。而浮动子元素不参与父容器高度计算，若父容器没触发 BFC，其包含块宽度可能为 0 或不可靠，导致 100% 算出荒谬值。
- 典型现象：浮动块背景色只显示一竖条，outline 查看发现父容器
height: 0 - 解决优先级：先让父容器“看见”子元素——用
display: flow-root（推荐）或overflow: hidden（慎用，会裁剪） - 别在子元素上硬加
width: 500px来掩盖问题，这治标不治本，响应式下立刻崩
box-sizing 和 padding/border 暗中吃掉可用宽度
即使写了 width: 300px，若没设 box-sizing: border-box，那 padding: 10px + border: 1px 就会让总宽变成 322px —— 在窄容器里必然溢出，浏览器可能反向压缩内容区，视觉上像“变窄”了。
- 检查方式：在开发者工具「Computed」面板里搜
box-sizing，确认是否被覆盖（划掉即失效） - 全局方案：
* { box-sizing: border-box; }必须放在所有样式表最前面，否则被 Bootstrap 等覆盖就白写 - 特别注意伪元素（如
::after清除浮动）：也要加*::before, *::after { box-sizing: border-box; }，否则边框会额外撑开
HTML 空格和 font-size 触发的隐形宽度干扰
浮动块之间若有换行或空格，浏览器会渲染一个空格字符；若父容器 font-size: 16px，这个空格就占约 4px 宽度。多个浮动块排下来，累积误差会让最后一块被挤到下一行，看起来像“突然变窄”或“错位”。
- 快速验证：把 HTML 中浮动块写成一行 ——
<div></div> <div></div>，间隙消失即证实 - 安全解法：父容器设
font-size: 0，所有浮动子元素再显式设font-size（漏一个，文字就消失） - 更现代的路：直接用
display: flex，空格不参与布局，彻底绕过这个坑
真正卡住宽度的，往往不是某个属性写错了，而是浮动行为本身和文档流断裂之间的连锁反应——从父容器是否“存在”，到子元素是否“有明确尺寸依据”，再到盒模型是否一致，每一步都得对齐，少一环就缩。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
