优先用自定义边框替代.img-thumbnail以避免padding挤占浮动空间；若必须用需重置padding:0；文字环绕失效多因父容器触发BFC（如flex/grid/overflow:hidden）；figcaption应避免默认块级行为，可转为浮动figure或普通p标签；小屏需取消浮动、居中对齐并微调圆角与字号。
图片加边框用 .img-thumbnail，但别和 float-start 一起硬套
直接给 <img> 加 class="img-thumbnail float-start me-3" 看似合理，实际容易出问题：边框是 .img-thumbnail 自带的 1px solid #dee2e6 和 border-radius: 0.25rem，但它内部还设了 padding: 0.25rem —— 这个内边距会挤占浮动空间，导致文字离图太远或错位。
实操建议：
- 优先去掉
.img-thumbnail，改用自定义边框：class="float-start me-3" style="border: 1px solid #adb5bd; border-radius: 4px;" - 若必须用
.img-thumbnail，得手动覆盖内边距：style="padding: 0; border-radius: 4px;" - 边框颜色别用默认的浅灰（
#dee2e6），在暗色背景或高对比场景下几乎不可见，换成#adb5bd或var(--bs-border-color)更稳
文字环绕失效？先查父容器有没有偷偷触发 BFC
加了 float-start 和边框，文字还是从图片下面开始排——大概率不是代码写错了，而是父容器“拦住了”浮动。浮动元素一旦脱离文档流，只能影响同属一个 BFC 内的后续内容；BFC 一挡，环绕就断了。
常见拦截点：
- 父容器用了
display: flex或display: grid—— flex 容器完全忽略float - 父容器设了
overflow: hidden（比如某些.card-body、.container子元素默认带这个） - 图片和文字被塞进了同一个
<div class="row">或<div class="d-flex">里 - 父容器没内容、没高度，导致浮动“悬空”，文字找不到锚点
figcaption 怎么配才不破坏环绕效果
想给带边框的环绕图加说明文字，别直接把 <figcaption> 塞进 <figure> 里再套浮动——<figure> 默认是块级，<figcaption> 会独占一行，直接把文字推到图下方。
正确做法：
- 不用
<figure>，把说明文字写成普通<p>，放在图片后面、正文段落前面：<img class="float-start me-3" ...><p class="small text-muted mb-0">这是图注</p><p>正文从这里开始绕排...</p> - 如果非要用
<figure>，得让它也参与浮动：<figure class="float-start me-3"><img ...><figcaption class="small text-muted mt-1">图注</figcaption></figure> - 注意
mb-0或mt-1控制图注和正文间距，避免上下留白过大撑开行距
小屏下边框+浮动怎么不炸开
PC 端看着好好的带边框环绕图，一缩到手机屏就错位、重叠、边框溢出——根本原因是浮动 + 固定边框在窄容器里没预留收缩余地。
响应式处理要点：
- 在
@media (max-width: 768px)里移除浮动：.float-start { float: none !important; }，同时加text-align: center让图居中 - 边框保留，但圆角收小一点：
border-radius: 2px，避免小图上圆角显得突兀 - 图注文字字号别用
.small（它在移动端可能太小），改用font-size: 0.75rem显式控制 - 千万别只清
float却忘了清clear：原先靠clear: both分隔的段落，浮动取消后可能堆叠，加一句clear: none更稳妥
边框和浮动本身不难，难的是它们共存时对布局上下文的敏感度——一个 overflow: hidden 或一行 display: flex 就能让整个效果消失，而这类样式往往藏在祖先组件里，得一层层 inspect 才能揪出来。
