使用mPDF生成PDF时实现带float的div整段同页显示需求

我明白你现在的需求：循环生成的每个.action_div段落必须完整显示在同一页面，不能被分页拆分，同时又不能在每次循环后强制分页（避免出现空页）。结合mPDF对CSS的支持，这里有个可靠的解决方案：

核心思路 #

mPDF支持CSS的page-break-inside: avoid;属性，但要注意float布局会导致容器高度塌陷，mPDF无法准确计算整个段落的高度，从而无法正确判断是否需要分页。所以我们需要两步：

1. 给每个完整段落容器（.action_div）添加禁止内部分页的样式
2. 清除每个浮动容器的浮动，确保mPDF能正确计算容器高度

修改后的完整代码示例 #

<style>
/* 核心样式：禁止段落内部分页 */
.action_div {
    page-break-inside: avoid;
    margin-bottom: 15px; /* 可选：增加段落间的间距，提升可读性 */
}
/* 清除浮动的通用类，确保容器高度正确 */
.clearfix::after {
    content: "";
    display: table;
    clear: both;
}
</style>

<?php foreach($hazards as $i => $hazard): // 假设外层循环是hazards数组 ?>
<div class="action_div">
    <!-- 危险项标题行 -->
    <div style="width: 100%;padding-top: 10px;padding-bottom: 10px;font-size: 12px;font-family: segoe;font-weight: bold;" class="clearfix">
        <div style="width: 10%;float:left;text-align: center;">&nbsp;</div>
        <div style="width: 90%;float:left;">
            <?php echo str_pad($i+1, 2, "0", STR_PAD_LEFT); ?>. <?php echo $hazard['name'] ?>
        </div>
    </div>

    <!-- Top3控制措施标题行 -->
    <div style="width: 100%;background-color: #EBECEC;padding-top: 8px;padding-bottom: 8px;font-size: 12px;font-family: segoe;border-bottom: 1px dotted #939598;border-top: 1px dotted #939598;font-weight: bold;" class="clearfix">
        <div style="width: 10%;float:left;text-align: center;">&nbsp;</div>
        <div style="width: 90%;float:left;">Top 3 Control Measure</div>
    </div>

    <!-- 控制措施列表 -->
    <?php $j=1; foreach($hazard['pie_char_arr'] as $action): ?>
    <div style="width: 100%;padding-top: 10px;padding-bottom: 10px;font-size: 12px;font-family: segoe;border-bottom: 1px dotted #939598;" class="clearfix">
        <div style="width: 15%;float:left;text-align: center;">
            <?php echo str_pad($j, 2, "0", STR_PAD_LEFT); ?>
        </div>
        <div style="width: 85%;float:left;"><?php echo $action['action'] ?></div>
    </div>
    <?php if($j==3) break; $j++; ?>
    <?php endforeach; ?>
</div>
<?php endforeach; ?>

关键说明 #

1. page-break-inside: avoid;：这是让mPDF不拆分当前容器的核心，当当前页面剩余空间不足以放下整个.action_div时，mPDF会自动将整个段落移到下一页，不会拆分内容。
2. 清除浮动：给每个包含float元素的容器添加.clearfix类，确保容器能正确包裹内部浮动元素，mPDF可以准确计算整个段落的高度，避免因为高度塌陷导致的分页判断错误。
3. 避免强制分页：不要在循环后添加page-break-after: always;，这样mPDF会自动根据内容高度判断是否分页，不会出现少量内容占一页的空白页问题。

额外注意事项 #

• 确保使用的mPDF版本是7.0+，旧版本对page-break-inside的支持不够完善。
• 如果内容中存在超长文本（比如单个$action['action']内容特别长），可以给文本容器添加word-wrap: break-word;，避免文本溢出容器，影响mPDF的高度计算。

内容的提问来源于stack exchange，提问作者Bharat Maheshwari