这是规范所描述的功能-这里的几个答案是有效的，并与以下内容一致:

If it has block-level children, the height is the distance between the top border-edge of the topmost block-level child box that doesn't have margins collapsed through it and the bottom border-edge of the bottommost block-level child box that doesn't have margins collapsed through it. However, if the element has a nonzero top padding and/or top border, or is the root element, then the content starts at the top margin edge of the topmost child. (The first case expresses the fact that the top and bottom margins of the element collapse with those of the topmost and bottommost children, while in the second case the presence of the padding/border prevents the top margins from collapsing.) Similarly, if the element has a nonzero bottom padding and/or bottom border, then the content ends at the bottom margin edge of the bottommost child.

网址:https://www.w3.org/TR/css3-box/#blockwidth

如果你在#childRightCol和#childRightCol中的内容是向左或向右浮动的，只需将其添加到css中:

#childRightCol:before { display: table; content: " "; }
#childRightCol:after { display: table; content: " "; clear: both; }
#childLeftCol:before { display: table; content: " "; }
#childLeftCol:after { display: table; content: " "; clear: both; }

Add

clear:both; 

添加到父div的css中，或者在父div的底部添加一个div，即清除:both;

这是正确答案，因为overflow:auto;可能工作于简单的网页布局，但会混乱的元素开始使用的东西，如负边距等

对于那些不能从这个答案中找到答案的人:

尝试设置填充值大于0，如果子div有margin-top或margin-bottom，你可以用填充替换它

例如，如果你有

#childRightCol
{
    margin-top: 30px;
}
#childLeftCol
{
    margin-bottom: 20px;
}

最好将其替换为:

#parent
{
    padding: 30px 0px 20px 0px;
}

这是你想要的吗?

.childRightCol, .childLeftCol
{
    display: inline-block;
    width: 50%;
    margin: 0;
    padding: 0;
    vertical-align: top;
}

正如Jens在评论中所说

另一个答案是如何使div不大于它的内容?……而且…… 建议设置display:inline-block。这对我来说很有效。- - - - - - Jens Jun 2在5:41

这对我来说在所有浏览器中都更好。