使外部div自动与其浮动内容的高度相同

我想要div黑色的外部包裹它div的浮动。我不想使用style='height: 200px中div与outerdivID，因为我希望它自动将其内容的高度（例如，浮动div或多个）。

<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>

如何实现呢？

您可以将outerdiv的CSS设置为此

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

您也可以在末尾添加一个元素来完成此操作clear: both。可以使用JS（不是很好的解决方案）或:afterCSS伪元素（在较旧的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;改用。

我建议在clearfix上应用该技术#outerdiv。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>

这是您的情况的示例，以及Clearfix为解决该问题所做的工作。

使用jQuery：

设置父级高度=子级offsetHeight。

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

用 clear: both;

我花了一个多星期的时间来解决这个问题！