img左对齐需据布局上下文选择方案：text-align需写在父容器上；display:block+margin-right:auto适合单图独占行；float:left用于图文混排但需防塌陷；flex布局用justify-content:flex-start。
img 标签默认就是左对齐的，但“靠左”是否生效，取决于它所处的布局上下文——不是加个属性就完事，而是得看父容器怎么管它。
为什么 text-align: left 写在 img 上没用
这个属性只对**块级容器内的行内内容**起作用，而 img 默认是行内元素，所以它必须写在**父容器**上才有效：
- ✅ 正确：
<div style="text-align: left"><img src="a.jpg"></div> - ❌ 无效：
<img src="a.jpg" style="max-width:90%">（浏览器直接忽略） - ⚠️ 注意：如果父容器用了
display: flex或display: grid，text-align就完全失效——此时它已不在文本流里了
单张图片想严格贴左，用 display: block + margin
当图片需要独占一行、且不希望文字绕排时，这是最干净的做法：
- 先设
display: block，让img脱离行内流 - 再配
margin-right: auto（或留空，默认margin-left: 0），它自然贴左 - 不用清除浮动，不触发 BFC，也不影响后续元素布局
- 示例：
<img src="logo.png" style="max-width:90%">
float: left 适合图文混排，但得防塌陷
如果你在写文章类页面，希望图片左浮、文字从右边流式环绕，float 仍是唯一可靠方案：
- 必须直接加在
img上：style="float: left; margin-right: 12px;" -
float会让图片脱离文档流，父容器高度可能变成 0（塌陷） - 解决办法：在父容器末尾加
<div style="clear: both"></div>，或给父容器加overflow: hidden - 现代项目中慎用——响应式断点切换时容易错位，且和 Flex/Grid 不兼容
Flex 布局下，justify-content: flex-start 是最可控的左对齐
当你已经用 Flex 管理整体结构（比如卡片、图+标题组合），别回头去套 text-align：
- 给父容器设
display: flex，它自动把子项（包括img）当 flex item 处理 -
justify-content: flex-start让所有子项左对齐（默认值，通常可省略） - 如果父容器有其他内容（如文字、按钮），记得检查是否要加
flex-wrap: wrap防溢出 - 注意：不要给
img单独设float或text-align，会冲突
真正容易被忽略的是：“左对齐”不是单一 CSS 属性能决定的事，而是整个布局层级的选择结果。你得先判断这张图是不是单独一行、有没有旁边文字、父容器是否已有 Flex/Grid、是否要响应式适配——选错前提，再写十遍 text-align: left 也没用。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
