直接用 img 自带浮动和 border 最简，无需额外包裹 div；需设 box-sizing: border-box 防边框撑宽，慎用 outline；仅当需 padding/box-shadow 时才合理包 div，现代布局优先用 flex 或 grid。
直接用 img 自带浮动 + border 最简，别绕路包 div
绝大多数情况下，给图片加外框再浮动，根本不需要额外套一层 div。强行包裹只会增加 DOM 节点、干扰语义、让 CSS 更难维护。
常见错误现象：div 包裹后浮动失效、左右间距错乱、响应式时边框塌陷、打印样式异常。
-
img是可替换内联元素，天然支持float和border，直接设置即可 - 若需统一控制，用属性选择器：
img[alt]或类名如.content-img更精准 - 浮动后记得清浮动（比如父容器加
overflow: hidden或用::after伪元素）
浮动图片加边框时，box-sizing 必须设为 border-box
否则边框会撑大图片尺寸，导致浮动错位或换行——这是最常被忽略的兼容性坑。
使用场景：图文混排、博客正文、新闻摘要图。
立即学习“前端免费学习笔记（深入）”；
- 默认
box-sizing: content-box，width: 100px+border: 2px solid #ccc= 实际占宽 104px - 加上
box-sizing: border-box后，边框计入宽度，布局更可控 - 推荐全局重置：
img { box-sizing: border-box; }
用 outline 替代 border？别，它不占布局空间
有人想用 outline 避免影响浮动流，但 outline 不参与盒模型计算，会导致点击/焦点样式漂移、与文字重叠、无法圆角。
性能影响：outline 渲染开销略低，但代价是失去对齐精度和视觉一致性。
-
outline永远画在元素“外侧”，不推挤邻近元素，浮动时容易和文字打架 - 圆角必须用
border-radius，而outline-radius不存在 - 真正需要非布局边框的场景（如调试），可用
box-shadow: 0 0 0 2px #000模拟
如果真要包 div，只在一种情况合理：需要独立控制边框/阴影/内边距
比如图片要带内边距（padding）、投影（box-shadow）、或边框动画，而这些不能直接作用于 img（因 img 不支持 padding）。
此时包裹是必要妥协，但必须注意：
- 包裹
div设display: inline-block或float: left，别用display: block破坏行内流 -
img设vertical-align: top/middle/bottom，避免基线留白 - 移动端慎用浮动，优先考虑
display: flex或grid替代
flex 或 grid。 
