浮动图片撑不开父容器是因为float使元素脱离文档流导致父容器高度塌陷；需用overflow:hidden或display:flow-root清除浮动，注意IE不支持后者；百分比宽度应改用calc()并设box-sizing:border-box；文字环绕时给图片加display:block或vertical-align解决行高错位；响应式图片布局应优先使用flex或grid而非float。
浮动图片在响应式中为什么撑不开父容器
因为 float 会让元素脱离文档流，父容器默认高度塌陷——这不是 bug，是规范行为。常见现象是：图片加了 float: left 后，下面的文字上浮、父 div 高度变成 0、背景色/边框消失。
- 必须主动清除浮动，否则布局会连锁错位
-
overflow: hidden或display: flow-root是最轻量的修复方式，比伪元素更少侵入 - 用
display: flow-root时注意 IE 不支持（Edge 16+ 才开始支持） - 如果父容器本身有
padding或border，清除浮动后才能正确包裹内容
百分比宽度 + 浮动图片怎么避免换行错乱
当给浮动图片设 width: 33.333%，又没控制盒模型，小数像素四舍五入会导致最后一张图掉到下一行——尤其在缩放或不同 DPI 屏幕下更明显。
- 统一加
box-sizing: border-box，确保 padding/border 不撑宽 - 避免用
33.333%，改用calc(100% / 3)（现代浏览器都支持） - 如果图片外还有 margin，记得把它算进总宽，比如
width: calc((100% - 20px) / 3)（假设左右共 20px 间距） - 不要依赖
float实现等分布局，flex或grid更稳；但若必须兼容老项目，就老老实实做容错
浮动图片和文字环绕时行高错位怎么办
文字紧贴浮动图片时，首行文字常被“顶高”，看起来像多了一行空白——本质是 line-height 和 vertical-align 在作祟，尤其是图片默认对齐基线（baseline），会为下方留出字母 g、y 的空间。
- 给图片加
vertical-align: top或middle，立刻解决文字上浮 - 如果图片是行内替换元素，
display: block能彻底切断行内格式化上下文影响 - 别用
margin-top硬调，那只是掩盖问题，换字体或字号又会复现 - 注意：
vertical-align只对 inline/inline-block 元素生效，浮动后它其实已失效，所以优先选display: block
移动端用浮动做响应式图片网格真靠谱吗
不靠谱。CSS float 本意不是做栅格系统，强行用于响应式图片布局，会不断遇到断点适配难、顺序不可控、反向排列（RTL）支持差等问题。
立即学习“前端免费学习笔记（深入）”；
- 媒体查询里反复写
float: none+width: 100%很容易漏掉某个断点 - 浮动无法改变视觉顺序，而
order在 flex 中能轻松重排 - 用
float实现“左图右文”和“上图下文”的响应切换，得写两套结构或 JS 切换 class，维护成本高 - 现在主流方案是
display: grid配grid-template-columns: repeat(auto-fit, minmax(280px, 1fr))，一行代码搞定自适应
浮动没死，但在响应式图片布局这件事上，它早该退场了。真正容易被忽略的，是团队里还在用 float 写新页面的人，可能根本没意识到自己正在手动模拟一个已被原生支持的布局模型。
