浮动元素超宽是因脱离文档流后父容器无法约束其水平尺寸参照系，需同时设置父容器显式宽度、display: flow-root和子元素max-width: 100%才能真正解决。
float元素撑破父容器宽度的真正原因
这不是“撑破”，而是浮动元素脱离文档流后，父容器既无法感知其高度，也**无法约束其水平尺寸参照系**。尤其当图片或块级元素设了float: left又没配width时，浏览器会按原始尺寸渲染——哪怕父容器只有300px，一张1920px的图照样横向溢出。
为什么overflow: hidden不能直接解决超宽问题
overflow: hidden只是触发BFC让父容器重新计算高度，但它**不改变浮动元素的包含块**。浮动图片的max-width: 100%仍以视口为基准计算，不是你写的那个父容器。
- 检查父容器是否真有显式宽度：
width: 100%、max-width: 300px等必须存在，否则max-width: 100%无从算起 - 确认浮动子元素自身设置了
max-width: 100%和height: auto（避免拉伸变形） - 若父容器用了
overflow: hidden，溢出部分会被静默裁剪——不是“缩进”，是“砍掉”
现代解法：display: flow-root + width控制
用display: flow-root替代overflow: hidden，既能创建BFC包裹浮动高度，又不裁剪内容。再配合显式宽度控制，才能真正约束浮动元素的水平范围。
- 给父容器加
display: flow-root和width: 100%（或具体数值） - 浮动子元素写
float: left; max-width: 100%; height: auto; - 旧项目兼容IE或老Safari？改用
overflow: auto，但务必加max-height: none防滚动条误触发
更彻底的规避方式：别用float做布局
浮动本意是文字绕排，不是布局工具。只要父容器设display: flex，子项默认横向排列，width、max-width、换行控制全部自然生效，且无塌陷、无裁剪、无包含块错位。
立即学习“前端免费学习笔记（深入）”；
- 多列卡片、图文混排、导航栏——这些场景用
flex比float少踩80%的坑 - 如果必须保留float（比如维护老代码），至少确保每个浮动项都有明确
width，而不是依赖内容撑开 - 移动端尤其注意：Android 4.x和iOS 12前的Safari对浮动+百分比宽的组合解析极不稳定
max-width调，不如先确认父容器有没有width、有没有flow-root、以及……这东西是不是真该用float。 
