加float不能消除图片底部白边，因img仍为inline元素，默认vertical-align:baseline导致行框底边留空；display:block可彻底解决，但图文混排需配合float+vertical-align:bottom。
img加了float为什么还有底部白边
加float本身不会直接消除图片底部白边，因为float只是让元素脱离文档流、触发块级格式化上下文，但img仍保留display: inline的原始计算行为——vertical-align: baseline照常生效，行框底边以下的空间依然存在。
常见误操作是只写img { float: left; }，没同步处理对齐或显示模式。此时白边仍在，尤其在父容器有line-height或字体度量较大的情况下更明显。
- float 不会隐式改变
vertical-align的作用域，它只影响定位和包裹行为 - 若图片与文字同行，
float后文字绕排，但图片自身仍按 baseline 对齐，空隙照旧 - 开发者工具里检查 computed
display值，大概率还是inline，不是block
display:block 是最稳的解法，但要注意场景限制
display: block 能彻底切断 inline 行为链：不参与基线对齐、无视 vertical-align、不响应父容器 line-height 或 font-size。白边消失是确定性结果。
但它不是万能开关，关键看布局需求：
- 图片单独成行（如 banner、头图）→ 直接上
img { display: block; }，无副作用 - 图片要和文字并排（如按钮图标+文字）→ 加了
display: block会强制换行，必须配合float或改用flex容器 - 父容器是
flex或grid→display: block依然有效，但此时 vertical-align 已被忽略，无需额外处理
float + vertical-align 组合才是图文混排的实用方案
当必须保留图片行内特性（比如图标紧贴文字），又不能用 flex/grid 时，float 需搭配 vertical-align 才真正起效。注意：vertical-align 只在 display: inline 或 inline-block 下生效，而 float 不会禁用它。
推荐写法：
img {
float: left;
vertical-align: bottom;
}
-
vertical-align: bottom比middle更可靠，它对齐的是当前行框底边，不依赖字体 x-height 计算 - 若父容器有默认
margin-bottom（如p标签），白边可能是段落外边距，不是图片问题 - HTML 源码中
<img>后紧跟换行或空格，会渲染为一个空格字符，造成约 4px 水平间隙（非白边，但易混淆）
为什么有时加了 display:block 还有缝
这不是 CSS 失效，而是干扰源藏在别处。90% 的“残留白边”跟图片本身无关：
- 父容器有
padding-bottom或margin-bottom（尤其<p></p>、<div> 默认带 margin） <li>图片导出时自带透明底或未裁切（Sketch/Figma 导出 PNG 常见），CSS 无法干预，得修图</li> <li>父容器设置了 <code>line-height且值很大，导致行框整体下移，即使图片是 block，其下方的行框空间仍可见
遇到这种情况，先打开开发者工具，逐层检查盒模型和 computed styles，别急着改 img 的样式。真正要稳，得从父容器开始排查。
