clear:both对浮动图片错位无效，因其仅作用于紧邻块级元素而非浮动元素本身；正确做法是给父容器设overflow:hidden或display:flow-root触发BFC。
float图片错位时，为什么clear:both不一定管用
因为clear作用对象是「紧邻的块级元素」，不是浮动元素本身。如果图片父容器没形成BFC，或者clear加在了浮动元素内部（比如img标签上），它完全不会起效。
常见错误现象：clear: both写在图片标签里、或写在浮动图片之后但未脱离文档流的空
里，页面依然塌陷或错行。
- 正确做法：在浮动图片的**父容器末尾**插入一个块级元素，并对其应用
clear: both - 更稳妥的做法：直接给父容器设置
overflow: hidden或overflow: auto（触发BFC） - 注意
overflow: hidden会裁剪溢出内容，若父容器内有绝对定位元素超出边界，可能被意外截断
现代项目该用float还是flex/grid处理图片对齐
除非要兼容IE8–9，否则别用float做布局对齐。它本意是文字环绕，强行用于布局会引发清除、塌陷、响应式断裂等一系列连锁问题。
使用场景明确：仅当需要「文字绕图」（如文章内嵌图）时才用float；其他所有图片排列、网格、居中、响应式对齐，优先选display: flex或display: grid。
立即学习“前端免费学习笔记（深入）”；
-
flex适合一维排列（横排/竖排）、等高对齐、自动间距（gap） -
grid适合二维控制（行列同时定义）、复杂图文混排、固定轨道+灵活区域混合 - 两者都天然规避清除浮动问题，且支持
aspect-ratio、object-fit等现代图片控制能力
清除浮动后父容器高度仍为0？检查是否触发了BFC
清除浮动只是让后续元素避开浮动区域，**不等于恢复父容器高度**。父容器高度为0的根本原因是浮动子元素脱离文档流，父容器无法感知其尺寸——这必须靠BFC解决。
能触发BFC的常见方式（任选其一即可）：
-
overflow: hidden/auto/scroll（最常用，但注意隐藏副作用） -
display: flow-root（语义清晰、无副作用，推荐新项目使用） -
float: left/right（自身浮动，一般不用） -
position: absolute/fixed（脱离文档流，通常不适用）
示例：
.gallery { display: flow-root; } /* 一行解决塌陷，无需额外clear元素 */
inline-block替代float时，为什么图片间总有缝隙
这是inline-block元素受HTML空白符（换行、空格）影响导致的默认行为，不是bug，但容易被误认为是CSS没写对。
- 解决方法1：父容器设
font-size: 0，子元素重置font-size（注意继承影响） - 解决方法2：移除HTML中
inline-block元素间的换行与空格（可读性差，不推荐） - 解决方法3：用
margin-right: -4px粗略抵消（不精确，响应式下易失效） - 真正省心的方式：改用
flex，缝隙问题天然消失
这个细节常被忽略——很多人试了vertical-align: top却没动font-size，结果缝隙还在。
