如何在XSL-FO的region-body中垂直拆分页面并为单个区域设置背景色？

我太懂这种折腾好几个小时的憋屈感了！你遇到的问题和CSS里浮动元素导致父元素高度坍塌的情况完全一致——XSL-FO里的浮动元素默认脱离正常文档流，父块不会自动计算浮动元素的高度，所以黄色背景就只显示父块本身的高度，没把红色浮动块包进去。

先看看你提供的代码片段（我帮你补全了未写完的部分）：

<fo:page-sequence master-reference="A4">
  <fo:flow flow-name="xsl-region-body">
    <fo:block background-color="yellow">
      <fo:float float="left">
        <fo:block width="30%" background-color="red">Hello there </fo:block>
      </fo:float>
    </fo:block>
  </fo:flow>
</fo:page-sequence>

下面给你两种靠谱的解决方案，都是对标CSS clearfix的思路：

方法一：添加清除浮动的块元素 #

在浮动元素的后面加一个clear="both"的块，强制父块包含浮动元素的高度，这是兼容性最好的方法：

<fo:page-sequence master-reference="A4">
  <fo:flow flow-name="xsl-region-body">
    <fo:block background-color="yellow">
      <fo:float float="left">
        <fo:block width="30%" background-color="red">Hello there </fo:block>
      </fo:float>
      <!-- 清除浮动，让父块包裹住浮动元素 -->
      <fo:block clear="both" />
    </fo:block>
  </fo:flow>
</fo:page-sequence>

方法二：给父块设置overflow属性 #

部分XSL-FO处理器（比如Apache FOP、RenderX XEP）支持给父块设置overflow="hidden"，这样父块会自动包含浮动元素的高度，代码更简洁：

<fo:page-sequence master-reference="A4">
  <fo:flow flow-name="xsl-region-body">
    <!-- 用overflow:hidden触发BFC，包裹浮动元素 -->
    <fo:block background-color="yellow" overflow="hidden">
      <fo:float float="left">
        <fo:block width="30%" background-color="red">Hello there </fo:block>
      </fo:float>
    </fo:block>
  </fo:flow>
</fo:page-sequence>

注意：不同的XSL-FO处理器对属性的支持可能有细微差别，如果第一种方法生效，优先用它，兼容性更稳。

内容的提问来源于stack exchange，提问作者Saurabh Gour