因为浮动元素脱离文档流，max-width: 100% 的“100%”参照包含块（如视口）而非父容器，且父容器高度塌陷导致约束失效；必须触发BFC（如display: flow-root）并配合display: block才能使约束生效。
为什么给浮动图片加 max-width: 100% 还是溢出？
因为浮动元素脱离文档流，max-width: 100% 的“100%”不是相对于卡片容器，而是相对于其**包含块**（可能是视口或某个祖先块），同时父容器高度塌陷，导致宽度约束根本没被正确继承。常见现象：图片右边缘刺穿卡片边框、文字从图片下方钻出、卡片背景色消失。
必须同时满足两个条件：让卡片“感知”浮动图片的存在（触发 BFC），让图片尺寸真正受限于卡片内容区（display: block + max-width: 100%）。
-
img必须设display: block—— 否则 inline 行内行为会让max-width计算失准，底部还多出空白 - 卡片容器不能只靠
max-width: 100%，得明确尺寸约束：比如设width、max-width或嵌入 flex/grid 容器中 - 若卡片有
padding或border，且用了box-sizing: border-box，注意max-width: 100%只管 content 区域，不自动减去 padding
用 display: flow-root 触发 BFC 是最干净的解法
它专为解决浮动塌陷而生，语义清晰、无副作用：不裁剪、不干扰滚动、不改变 margin 合并规则，也不影响 overflow: visible 等后续设置。
写法就一行：.card { display: flow-root; }，之后再给图片加 float: left 和 max-width: 100% 就能稳住。
立即学习“前端免费学习笔记（深入）”；
- 兼容性：Chrome 58+、Firefox 57+、Safari 15.4+、Edge 79+；IE 完全不支持
- 如果项目需兼容 Safari 14 或更早版本，部分安卓 WebView 可能表现不稳定，建议 fallback 到
overflow: hidden或伪元素法 - 别和
display: inline混用——它必须作用于块级上下文
overflow: hidden 能用，但得小心裁剪风险
它确实能触发 BFC、撑开卡片高度、让 max-width: 100% 生效，但副作用真实存在：任何视觉上“越界”的内容（比如 transform: translateX(-10px) 的角标、下拉菜单、tooltip）都会被无声裁掉。
尤其在 iOS Safari 中，它还可能卡住 touch 事件或影响滚动性能。
- 仅当卡片内容绝对可控、无动态偏移/弹层时才推荐
- 必须确保卡片本身有明确宽高约束，否则
overflow: hidden不会裁——“溢出”前提不存在 - IE6/7 下可能意外裁剪，老项目建议改用
zoom: 1触发 hasLayout
伪元素清除法（.clearfix::after）怎么写才不翻车？
这是兼容性最广的方案，但漏任意一项就会在旧版 Safari 或 IE 中失效。核心三要素缺一不可：content: ""、display: table（比 block 更稳妥）、clear: both。
标准写法：.clearfix::after { content: ""; display: table; clear: both; height: 0; }
- 漏
content: ""→ 伪元素不生成，清除无效 - 用
display: inline→ 清除失效（旧内核下 clear 对 inline 元素无意义） - 不设
height: 0或font-size: 0→ 可能撑开额外空白行 - 别把它加在
img自身上：img { clear: both; }不解决父容器塌陷，反而破坏环绕逻辑
display: flow-root，如果图片自己加了 margin-left: -20px 或 transform: translateX(-15px)，它视觉上“溢出”了，但那不是清除失败——那是你主动让它越界的。这时候该检查的是布局意图，而不是清除方法。 
