图文混排应以 flex 替代 float，将图文单元整体封装为 flex 容器，控制图片比例与文字区域最小宽度，并添加圆角、内边距等微调提升视觉节奏。
图文混排不美观，通常不是图片或文字本身的问题，而是布局逻辑没理清。float 容易塌陷、需要清除浮动，flex 则更可控、语义清晰，对初学者更友好。重构重点不在换写法，而在理解“内容流”和“容器职责”。
用 flex 替代 float 布局图文关系
float 是为文字环绕图片设计的，不是为现代图文卡片准备的。强行用 float 排版标题+图+摘要，容易错位、换行异常、响应差。
- 把图文组合（比如一个新闻条目）单独包一层 div，作为 flex 容器
- 设置 display: flex，再用 flex-direction: row（横向）或 column（纵向）明确流向
- 用 align-items 控制垂直对齐（如 center 让图和文字中线对齐）
- 用 gap 代替 margin，避免外边距合并问题，间距更稳定
图片尺寸与比例要主动控制
默认 img 会拉伸或留白，破坏整体节奏。别依赖原图尺寸，用 CSS 约束它。
- 给图片加 width: 100% 和 height: auto，保持等比缩放
- 如果需要固定宽高比（比如 16:9 封面图），用 aspect-ratio: 16 / 9（现代浏览器支持良好）
- 配合 object-fit: cover 防止变形，裁剪居中显示关键区域
文字区域要有独立容器和最小宽度
图文并排时，文字常被挤成窄条、断句难读。这不是字体问题，是没给文字块“呼吸空间”。
立即学习“前端免费学习笔记（深入）”；
- 把标题、摘要、时间等文字内容包进一个 div.text-content
- 设 min-width: 200px（或按内容调整），防止在小屏下过度压缩
- 搭配 flex: 1 让它自动占满剩余空间，同时保底不塌
加一点视觉节奏感，不用复杂样式
初级项目容易“干净过头”，反而显得空洞。微调即可提升质感。
- 图片加 border-radius: 4px 或 8px，比直角柔和
- 文字区域加 padding: 12px，和图片形成自然间隔
- 标题用 font-weight: 600，摘要用 color: #666，层次立刻分明
基本上就这些。不复杂但容易忽略——关键是把每个图文单元看作一个整体，而不是零散的 img 和 p 标签堆在一起。
