将#upperDiv设置为以下任意值：

overflow: hidden;
width: 100%;

或

float: left;
width: 100%;

或者使用CSS伪元素（兼容IE8+）创建规则，如下所示

#upperDiv:after {
  content: "";
  display: table;
  clear: both;
}

最佳解决方案

创建可重用的类规则，如下所示。

.group:after {
  content: "";
  display: table;
  clear: both;
}

现在你可以把它应用到任何需要相同功能的东西上。

<div id='upperDiv' class="group" ... >

P.S.如果您需要IE 6/7兼容性，请检查this post。

这是有意的，因为浮动是为段落中的图像（多个段落可以环绕图像）等内容设计的。
复杂螺旋有一个fuller explanation至于为什么和艾德埃利奥特描述了一些approaches to making containers expand around floats。我发现overflow: hidden的方法在大多数情况下工作得最好。

之后

<div id='leftDiv' style='float:left;width:25%;'>
   content2
 </div>

加

<div style="clear:both"></div>

它会解决你的问题。

最近引入了一个新属性display: flow-root;，它将修复这个问题，没有任何黑客攻击，并几乎所有的主要支持

<div id='upperDiv' style='border: 1px solid #000000; display: flow-root;'>
     <div id='rightDiv' style='float:right;width:75%;'>
       content1
     </div>  
     <div id='leftDiv' style='float:left;width:25%;'>
       content2
     </div>
</div>
<div id='lowerDiv' style='height:50px;border: 1px solid #000000;margin-top:5px;'>
   content3
</div>