您可以将outerdiv的CSS设置为

#outerdiv {
    overflow: hidden; /* make sure this doesn't cause unexpected behaviour */
}

你也可以通过在末尾添加一个clear: both元素来实现这一点，这可以通过普通的方式添加，比如使用JS（不是一个好的解决方案）或者使用:after CSS伪元素（在旧的IE中不被广泛支持）。
问题是容器不会自然地扩展以包含浮动的子元素。使用第一个例子时要注意，如果你有任何子元素在父元素之外，它们将被隐藏。你也可以使用'auto'作为属性值，但是如果任何元素出现在父元素之外，这将调用滚动条。
您也可以尝试浮动父容器，但根据您的设计，这可能是不可能/困难的。

首先，我强烈建议你在一个外部的CSS文件中做你的CSS样式，而不是内联的。它更容易维护，并且使用类可以更好地重用。
根据Alex的回答（& Garret的clearfix）“在clear末尾添加一个元素：both”，你可以这样做：

<div id='outerdiv' style='border: 1px solid black; background-color: black;'>
        <div style='width: 300px; border: red 1px dashed; float: left;'>
            <p>xxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p>
        </div>

        <div style='width: 300px; border: red 1px dashed; float: right;'>
            <p>zzzzzzzzzzzzzzzzzzzzzzzzzzzzz</p>
        </div>
        <div style='clear:both;'></div>
    </div>

这是可行的（但正如您所看到的，内联CSS并不那么漂亮）。

您可能需要尝试自关闭浮点，如http://www.sitepoint.com/simple-clearing-of-floats/中所述
所以也许可以试试overflow: auto（通常有效），或者overflow: hidden，就像alex说的那样。

我知道有些人会讨厌我，但我发现display:table-cell可以帮助解决这个问题。
真的很干净。

首先，不要使用width=300px，这是标签的属性设置，而不是CSS，而是使用width: 300px;。
我建议在#outerdiv上应用clearfix技术。Clearfix是清除2个浮动div的通用解决方案，这样父div将扩展以容纳2个浮动div。

<div id='outerdiv' class='clearfix' style='width:600px; background-color: black;'>
    <div style='width:300px; float: left;'>
        <p>xxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p>
    </div>

    <div style='width:300px; float: left;'>
        <p>zzzzzzzzzzzzzzzzzzzzzzzzzzzzz</p>
    </div>
</div>

这里是您的情况的example以及Clearfix如何解决它。

使用jQuery：
设置父对象高度=子对象偏移高度。

$(document).ready(function() {
    $(parent).css("height", $(child).attr("offsetHeight"));
}

使用以下样式在父代的结束标记之前添加一个新的空div：clear: both;。就像这样：<div style="clear:both"></div>.
我花了一个多星期才弄明白!