浮动图片宽高不生效需设display: block；换行用clear: left；父容器塌陷用::after清除；现代推荐grid布局而非float。
浮动图片时宽高不生效？检查是否设置了display: block
浮动元素默认是行内级，如果图片没设display: block，width和height在部分浏览器（尤其是旧版）可能被忽略，导致缩放失效。
实操建议：
- 给图片加
display: block，这是最稳妥的写法 - 用
max-width: 100%替代固定width，适配响应式场景 - 避免只设
height不设width——会拉伸变形，优先用aspect-ratio或object-fit配合容器控制比例
float: left后文字绕排了，怎么让下一张图从新行开始？
浮动会脱离文档流，后续图片若没清浮，会紧贴前一张的右侧，而不是“每行三张”这种预期布局。
实操建议：
- 用
clear: left控制换行：比如每3张图一组，在第4张上加clear: left - 更可靠的做法是给每行第一个
img或其父div加clear: left - 别依赖
margin-bottom来“撑开”下一行——它不解决浮动塌陷，只是视觉错觉
父容器高度塌陷，画廊下方内容叠上来了
float会让父容器无法感知子元素高度，表现为高度为0，后面的内容直接顶上来。
实操建议：
- 最轻量解法：在父容器末尾加一个带
clear: both的空div（即<div style="clear:both"></div>） - 现代写法推荐用
::after伪元素清除：.gallery::after { content:""; display:table; clear:both; } - 别用
overflow: hidden强行触发BFC——它可能裁掉阴影、下拉菜单等溢出内容
为什么现在不推荐用float做画廊？
浮动本质是为文字环绕设计的，不是布局工具。用它做画廊，会遇到对齐难、换行逻辑绕、响应式支持差等问题。
实操建议：
- 简单画廊优先用
display: inline-block+vertical-align: top，兼容性好且不易塌陷 - 现代项目直接上
display: grid，三行代码就能搞定等宽、间隙、换行：grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)) - 如果必须用
float（比如维护老项目），务必把clear、display、box-sizing这三件事写全，少一个都容易出视觉错位
浮动画廊真正的麻烦不在“怎么让它排成一行”，而在“怎么让它稳定地换行、不塌陷、不干扰其他元素”——这些细节藏在每一处clear和display里，漏掉就等于埋雷
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
