浮动图片列表导致父容器高度塌陷是因浮动元素脱离文档流，需用clearfix清除浮动；响应式下width与float须同步调整，现代项目优先选Grid/Flex布局。
用百分比宽度做浮动图片列表，不加 clear 就会塌陷——这不是 bug，是浮动的本性。
为什么图片列表一加 float 就“消失”了
父容器高度塌陷，是因为浮动元素脱离文档流，父容器看不见子元素撑开的高度。常见现象：图片排成一行后，下面的文字直接贴上去，或者整个列表在页面上“不见了”。
这不是 CSS 写错了，是没告诉父容器“我里面有人在飘着”。
- 只靠
width: 33.33%+float: left不足以让布局稳定 - 响应式下缩放时，百分比计算可能因四舍五入导致最后一项换行（尤其 3 列变 2 列时）
- IE8 及更早版本对小数百分比支持差，
33.33%可能被截为33%，三列总宽变成99%，留白错位
clearfix 不是可选项，是必填项
给图片列表的父容器加上 clearfix 类，是最轻量、兼容性最好、也最不容易出错的收尾方式。
立即学习“前端免费学习笔记（深入）”；
别用 overflow: hidden 临时顶替——它会意外裁掉 position: absolute 的下拉菜单或 tooltip。
- 推荐写法（现代项目也兼容 IE6+）：
.clearfix::after { content: ""; display: table; clear: both; } - 父容器必须设
class="clearfix"，光写样式不生效 - 不要在图片
<img>上直接加clear，那会强制换行，破坏横向排列
响应式断点里，width 和 float 要同步改
从桌面端 4 列切到移动端 2 列，不能只改 width，否则残留的 float 会让图片继续横向挤，溢出容器。
关键：断点内，float 和 width 必须成对调整，且优先级要一致。
- 桌面端：
width: 25%; float: left; - 平板端：
width: 33.33%; float: left; - 手机端：
width: 100%; float: none;（注意这里float: none是必须的） - 如果用了
display: inline-block替代float，记得清除font-size: 0或注释换行带来的间隙
现在还该用浮动做图片列表吗
如果项目要兼容 IE9 以下，或者只是几个静态图凑个格子，float + clearfix 依然够用、可控、无副作用。
但只要能放弃 IE11 以前的用户，display: grid 或 display: flex 更省心——它们天然不塌陷、自动等高、断点只需调 grid-template-columns 或 flex-wrap。
不过得小心：Grid 在某些安卓 WebView（如 4.4）里支持不全，上线前务必查 caniuse 对应版本。
