这里是文本段落，描述图片的上下文信息等。
问题现象分析
右对齐但仍占据空间的典型场景
图片设置为右对齐时，页面右侧看起来空空的，但文本区域却不会自动避开这块区域，导致视觉上出现未被占据的空白区域。这种现象在新闻卡片、文章段落、博客摘要等常见布局中尤为常见。
这与文档流的关系密切：如果图片仍然属于普通文档流的一部分，它会占据块级或内联盒的空间，直到遇到清除浮动或改变布局模型为止。
当你只简单地给图片设置 float、margin 或 text-align 时，布局行为不会自动达到你预期的右侧对齐且不干扰文本排布，因此需要更明确的布局策略来解决。
核心解决思路
从文档流中取出图片：绝对定位
将图片的定位改为 绝对定位，并让外部容器成为 定位上下文，就可以让图片固定在右侧，不再占据普通流的空间。
这是一个直接且可控的方案，但需要注意文本内容要给图片留出避免重叠的区域，避免内容被覆盖。
采用弹性盒布局（flex）实现右对齐
将父容器设为 display: flex，并让图片成为一个子项，文本在另一侧，使用 margin-left: auto 将图片推到最右端。
这种方式在响应式设计中表现良好，能在不打乱文本流的前提下实现对齐，同时保持两列自适应。
网格布局（grid）进行布局分区
使用 display: grid，把容器拆分成左侧文本区和右侧图片区，例如 grid-template-columns: 1fr auto，图片放在自动列中。
Grid 的分区式布局能精准控制两侧的宽度，避免图片在文本区域的上方或下方占用额外的块级高度。
实现技巧一览
三种主流布局模式对比
在实际场景中，Flex、Grid、Absolute 定位各有优劣：Flex 适合一维对齐，Grid 适合二维网格，Absolute 适合放置在固定位置。你可以根据页面结构混合使用这些模式。
对于响应式页面，Flex 和 Grid 的灵活性更高，能在不同屏幕宽度下保持稳定的对齐效果，而绝对定位则更适合固定区域的图文排布。
结合图片尺寸与容器高度的注意点
为避免图片过大导致页面跳动，推荐设置 max-width: 100%; height: auto，确保图片不会超过容器宽度。
同时，若使用绝对定位，需为容器留出足够的右侧空间（通过 padding-right 或 margin 以避免文本被遮挡），以维护良好的可读性。
实战代码示例
HTML结构建议
一个清晰的结构有助于浏览器快速渲染，同时便于通过类名控制不同布局方式。
提示： 为图片绑定明确的 class 名，以便在不同布局模式之间快速切换。
关键 CSS 片段
下面给出三种实现方式的核心片段，按需选用或组合使用。
/* 绝对定位示例 */
.card-absolute { position: relative; padding-right: 220px; }
.card-absolute .image-right { position: absolute; right: 0; top: 0; width: 200px; height: auto; }/* Flex 示例 */
.card-flex { display: flex; align-items: center; justify-content: space-between; }
.card-flex .image-right { width: 180px; height: auto; flex: 0 0 auto; }/* Grid 示例 */
.card-grid { display: grid; grid-template-columns: 1fr auto; gap: 16px; align-items: start; }
.card-grid .image-right { width: 180px; height: auto; }
兼容性与性能注意点
浏览器差异与兼容性
绝对定位在现代浏览器中的表现相对稳定，但对极老版本浏览器可能需要考虑回退方案。
Flex 与 Grid 是当前主流布局方案，兼容性良好，但对非常旧的 IE 版本可能存在差异，需要在必要时提供回退样式。
性能与 SEO 影响
在选择布局方式时，既要关注渲染性能，也要保持文本可读性。尽量使用渐进加载、压缩图片、并保持段落结构清晰，这些都有利于搜索引擎的索引与用户体验。
