PHP邮件中Body标签背景色未填充内部Div的原因咨询

首先还原你的场景代码（已脱敏）：

$email = "***EMAIL RECIEVED***"; 
include_once "PHPMailer/PHPMailer.php"; 
$mail = new PHPMailer(); 
$mail->setFrom('***EMAIL FROM***'); 
$mail->addAddress($email); 
$mail->Subject = "MyWhiteCard Coupon Claimed!"; 
$mail->isHTML(true); 
$mail->Body = "<body style='background-color: #fbedde; width:800px; text-align: center; margin-left: auto; margin-right: auto;'> 
<img src='cid:logo' width='40%' style='margin-left: auto; margin-right: auto; padding-top: 20px;'> 
<h1 style='color: #00a6a6; letter-spacing: 2px; margin-bottom: 0px; font-family: 'brandon_black';'>COUPON CLAIMED</h1> 
<div style='padding-top:30px; width: 400px;float:left;'> 
<img src='cid:coupon' width='85%' style='padding-left: auto; padding-right: auto; margin-bottom: 65px; border-radius: 2% !important; box-shadow: 0 2px 8px 0 rgba(0,0,0,0.2);'> 
</div> 
<div style='padding-top: 15px; padding-bottom: 33px; width: 400px; float: left; text-align: left; color: #00a6a6'> 
<h3 style='font-weight: bold;'>Claimed By:</h3> 
<h2 style='letter-spacing: 1px; font-family: 'brandon_black';'>$usr_fname $usr_lname</h2> 
<h3 style='font-weight: bold;'>$usr_contact</h3> 
<h3 style='font-weight: bold;'>$usr_member</h3><br> 
<h3>Please proceed to</h3> 
<a href='https://www.mywhitecard.ph/cms' style='color: #00a6a6; text-decoration: underline;'>https://www.mywhitecard.ph/cms</a> 
<h3>for scheduling of member.</h3> 
</div> 
</body>"; 
$mail->AddEmbeddedImage(dirname(__FILE__) . '***IMG LINK***','logo'); 
$mail->AddEmbeddedImage(dirname(__FILE__) . '***IMG LINK***','coupon'); 
$mail->send();

问题原因 #

这和PHPMailer本身无关，是HTML浮动布局的经典陷阱：你给两个div都设置了float: left，浮动元素会脱离正常的文档流，导致它们的父元素（<body>）无法感知到子元素的高度，最终body的高度塌陷为0——看起来就像背景色没有填充到div所在的区域。

修复方案 #

有几种简单的解决方法，优先推荐第一种（最适配邮件场景）：

1. 给body添加overflow: hidden样式

这是最快捷的方式，让body强制包含内部浮动元素，自动撑开高度：

<body style='background-color: #fbedde; width:800px; text-align: center; margin-left: auto; margin-right: auto; overflow: hidden;'>

2. 添加清除浮动的元素

在两个浮动div的末尾、</body>之前，插入一个清除浮动的空div：

<div style='clear: both;'></div>
</body>

3. 额外提示：邮件客户端兼容性

很多邮件客户端（比如Outlook）对CSS浮动的支持并不友好，如果后续遇到布局错乱问题，建议改用表格布局——这是邮件开发的通用最佳实践，能在绝大多数客户端保持一致的显示效果。

内容的提问来源于stack exchange，提问作者Button Press