用flex实现宽屏并排窄屏堆叠：容器设display: flex，图文同级包裹；窄屏媒体查询改display: block；图片加flex-shrink: 0，文字区域flex-grow: 1；删float，用gap或margin-inline-end控制间距。
用 flex 实现宽屏并排、窄屏堆叠
直接弃用 float，改用 display: flex 是当前最稳的路径。宽屏下设容器为 flex，文字和图片作为子项并列；窄屏下只需在媒体查询里切回 display: block，自然堆叠。
关键点在于：必须把图文包裹在同一个语义容器内（如 <div class="media">），否则无法统一控制流式行为。不要让 <img> 和 <p> 处于不同父级，否则响应式切换时容易错位或间距失控。
-
align-items: center可垂直居中，但仅对齐容器内行内高度有效；若文字多行，建议用align-items: flex-start避免顶部截断 - 给图片加
flex-shrink: 0，防止小屏下被压缩变形 - 文字区域用
flex-grow: 1占满剩余空间，比固定宽度更适应不同内容长度
图片缩放后左对齐失效怎么修
常见现象是：浏览器缩放后，原本右对齐的图片突然“飘”到右侧空白区，甚至部分溢出。这不是 bug，而是 float 脱离文档流后，其位置不再响应视口尺寸变化，而只是固守原始浮动上下文。
真正可靠的左对齐，是让图片始终处于文档流起始位置——即默认行为。所以解决方案不是“强制左对齐”，而是“不脱离流”。
立即学习“前端免费学习笔记（深入）”；
- 删掉所有
float: left/right和clear相关样式 - 确保
<img>没有被设为display: block后又没配margin或text-align控制位置 - 如果需要图文之间留空，用
gap（flex 容器）或margin-inline-end（现代写法），别依赖margin-right+float
文字环绕图片时换行错乱
这是 float 最典型的副作用：文字确实绕开了图片，但后续段落可能因清除不彻底，继续受浮动影响，导致整块内容偏移或换行异常。
如果你非得用 float（比如兼容老邮件模板），务必满足三个硬条件：图片有明确 width、有 margin 留白、且紧随其后的块级元素带 clear: both。
-
width必须用固定值（如120px），百分比或max-width在float场景下不可靠 - 绕排只适用于单段文字；多段
<p>必须每段都处理，或统一包进一个清除容器 - 现代项目优先用
shape-outside+float实现非矩形环绕，但注意 Safari 15.4+ 才稳定支持url()形式
表格里图文混排总不对齐
表格单元格（<td>）里图片比文字高一截，根本原因是 <img> 默认 vertical-align: baseline，而 <td> 默认 vertical-align: middle，两者基准线不一致。
别试图靠 line-height 拉齐——它只影响文字行高，对图片基线无效。最简解法是统一锚点。
- 给
<img>加vertical-align: middle，与<td>对齐逻辑匹配 - 若需更高精度（比如头像+文字），把图文包进
display: flex的<td>内，用align-items: center - 避免在
<td>里混用空格、换行符或未闭合标签，这些都会撑高整行
真正难的不是写对某一种布局，而是判断该不该用 float、要不要保表格语义、以及是否值得为老浏览器妥协。这些决策点，往往比代码本身更消耗时间。
