因为浮动元素脱离文档流，父容器高度塌陷导致包含块回退至视口或更外层定位上下文，width: 100% 便不再参照父容器，而按视口宽度计算；同时内联元素需 display: block 才支持 width，且父容器须有明确可计算宽度（如 width: 100%）并配合 box-sizing: border-box 避免溢出。
浮动元素的 width: 100% 不是“写错了”，而是它压根没按你想的容器去算宽度——它参照的是视口或最近定位上下文，不是你那个塌了的父容器。
为什么 width: 100% 在浮动元素上不按父容器算？
浮动让元素脱离文档流，父容器高度塌陷为 0，此时它的“包含块”（containing block）就不再是父容器，而是更外层的块（比如 或视口）。浏览器 fallback 到视口宽计算 width: 100%，但行为不可靠，尤其在 display: flex 或 display: grid 父容器里直接失效。
- 内联元素（如
<img>）加float后仍保留 inline 特性，width默认无效，必须显式加display: block - 父容器若本身是
width: auto（靠内容撑开），max-width: 100%就无参考对象，得先补width: 100%或inline-size: 100% - 盒模型干扰：父容器有
padding却没设box-sizing: border-box，子项width: 100%+padding就会溢出
怎么让浮动元素真正按父容器宽度自适应？
核心是两件事：让父容器“有宽度可参照”，再让浮动子项“愿意按这个宽度走”。不能只靠 float 自身。
- 给父容器显式设宽：
width: 100%、max-width: 1200px或固定值（避免width: auto） - 浮动子项同步加
display: block（尤其<img>、<span></span>等） - 用
max-width: 100%替代width: 100%，并确保父容器内容区宽度可计算（box-sizing: border-box+ 明确padding处理） - 避免对同一元素同时设
float和position: absolute，后者会让 width 完全失效
overflow: hidden 为什么有时也救不了 width: 100%？
overflow: hidden 是用来触发 BFC 撑高父容器的，但它不改变浮动子项自身的包含块。即使父容器高度恢复了，浮动子项的 width: 100% 还是照旧按外层算。
- 真正起作用的是：父容器有了明确宽度 + 浮动子项设了
display: block+max-width: 100% -
display: flow-root可替代overflow: hidden触发 BFC，且无裁剪副作用，但 IE 全系、Edge ≤18、iOS Safari ≤15.3 不支持 - 调试时加
outline: 1px solid red看浮动子项是否真的被包裹在父容器内，而不是“飘”在外面
浮动布局的宽度自适应从来不是单点修复——它依赖父容器宽度定义、子项 display 类型、盒模型设置、包含块层级四者咬合。任一环节松动，width: 100% 就会在某个嵌套深度或 viewport 下突然不认账。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
