浮动元素的 width: 100% 参照包含块（通常是视口或最近定位上下文）计算，而非父容器；脱离文档流导致父容器高度塌陷，使 width: 100% 实际按 0px 计算，浏览器 fallback 不可靠，尤其在 flex/grid 父容器中失效。
浮动元素的 width: 100% 参照谁计算？
它不参照你写的父容器，而是参照「包含块」（containing block）——通常是视口或最近的定位上下文。一旦元素 float: left 或 float: right，它就脱离文档流，父容器高度塌陷为 0，此时 width: 100% 实际算的是 0px；浏览器虽常 fallback 到视口宽度，但行为不可靠，尤其在 display: flex 或 display: grid 父容器里直接失效。
为什么加了 overflow: hidden 也没用？
加 overflow: hidden 是为了触发 BFC，让父容器重新包裹浮动子元素的高度，但它不改变浮动元素自身的尺寸计算逻辑。常见错误是以为这样就能让 max-width: 100% 生效，结果图片还是冲出卡片边界——因为浮动图片的包含块没变，max-width: 100% 依然按视口宽算。
- 真正起作用的是：父容器显式设
width（比如width: 100%或固定值），再配合浮动子项的max-width: 100% - 推荐用
display: flow-root替代overflow: hidden，避免意外裁剪 - 如果父容器宽度靠内容撑开（
width: auto），max-width: 100%就无从参考，必须补上width: 100%或inline-size: 100%
内联元素 + float 会让 width: 100% 彻底无效
<span></span>、<a></a>、<img> 默认是内联元素，即使加了 float，其原始 display 类型仍影响尺寸计算。编辑器里出现感叹号警告，大概率就是这个原因。
- 必须显式声明
display: block或display: inline-block -
<img>加float后建议同步设display: block，否则width: 100%不生效 - 别依赖 float 做响应式布局——现代项目优先用
display: flex或display: grid
盒模型溢出会掩盖 float 的真实问题
父容器写了 padding: 16px 却没设 box-sizing: border-box，子项又用了 width: 100%，实际宽度就是 100% + 32px，横向滚动条就来了。这时候你以为是 float 导致的，其实根源在盒模型。
- 统一加
* { box-sizing: border-box } - 检查父容器是否同时有
padding/border和width: 100% - 浮动本身不增加宽度，但它让父容器失去对子项宽度的约束力，把盒模型问题放大了
浮动不是响应式布局的合理解法，它的失效往往是一连串隐性条件叠加的结果：脱离文档流 → 父容器高度坍缩 → 包含块错位 → 宽度计算失准 → 盒模型溢出暴露。修复时得一层层往回捋，而不是只调一个 width。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
