CSS实现响应式浮动图片列表_利用百分比宽度与清除浮动

浮动图片列表导致父容器高度塌陷是因浮动元素脱离文档流，需用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。 Cleanup.pictures 智能移除图片中的物体、文本、污迹、人物或任何不想要的东西