本文介绍在 HTML/CSS 印刷文档（如导出 PDF）中，为两列 columns 布局添加右对齐、文本环绕的侧边栏（）的正确实现方法，重点解决 float: right 在多列环境下的宽度适配与分页断裂问题。

本文介绍在 html/css 印刷文档（如导出 pdf）中，为两列 `columns` 布局添加右对齐、文本环绕的侧边栏（`

`）的正确实现方法，重点解决 `float: right` 在多列环境下的宽度适配与分页断裂问题。

在基于 CSS 多列（columns: 2）的印刷排版中，直接对

使用 float: right; width: 100% 是无效的——因为 width: 100% 会使其占据整列宽度，无法实现“嵌入单列内并右浮动”的预期效果，反而破坏文本流，甚至导致侧边栏被挤至底部或跨列错位。

✅ 正确做法是：将 aside 的宽度设为相对于当前列的合理比例（如 30%），并配合 float: right 实现文本环绕；同时添加关键印刷优化属性：

article {
  columns: 2;
  column-gap: 1.5em;
}

aside {
  background-color: #f5f5f5;
  border-left: 3px solid #4a6fa5;
  padding: 0.75em 1em;
  margin: 0 0 0.8em 1em;
  float: right;
  width: 30%;        /* 关键：不能为 100%，需预留文本环绕空间 */
  break-inside: avoid; /* 防止侧边栏在 PDF 分页时被截断 */
  font-size: 0.9em;
  line-height: 1.5;
}

⚠️ 注意事项：

• 语义结构优先：确保
  紧邻其生效范围内的正文段落（推荐置于
  后、下一段
  前），避免包裹在块级容器（如
  ）中——部分 PDF 渲染引擎（如 wkhtmltopdf、WeasyPrint）对 float + columns 的嵌套支持有限。
• 避免 width: 100%：在 columns 环境中，100% 指整列宽度，而非视口；30%–40% 是兼顾可读性与留白的常用区间。
• 强制不分页：break-inside: avoid 可防止侧边栏内容被拆分到不同 PDF 页面，提升专业印刷体验。
• 重置首段间距：添加 article > *:first-child { margin-top: 0; } 消除默认段首上边距，使布局更紧凑。

此外，建议为

添加明确的语义化样式（如左竖线、浅灰背景），并在长文档中统一控制最大高度（如配合 max-height: 12em; overflow: hidden;）以维持版式平衡。经实测，该方案在主流 PDF 导出工具（WeasyPrint、Prince、wkhtmltopdf）中均能稳定渲染出符合印刷规范的双栏+浮动侧边栏效果。