虽然父级没有设置高度，但子元素会突破父级？

Question

这可能很难解释，所以为了更好的衡量，我在JsFiddle上放了一个模型：http://jsfiddle.net/HZpBG/

我有#box-cont没有设定高度，通常（至少从我的经验来看），意味着它需要所有嵌套元素的总和高度+任何填充。

但是，.valid和.invalid（据我所知，它包含在#box-cont中）似乎不仅仅是#box-cont而且还在.box-bottom之内。也是{{1}}。

关于这个问题，任何人都可以指出为什么会这样吗？

我已经来回试图诊断问题无济于事：（。

任何帮助将不胜感激;）!!

Answer 1

您需要将clear: both;添加到box-bottom类：

.box-bottom {
    width: 500px;
    height: 20px;
    background: #000 no-repeat;
    clear: both;
}

更新了jsFiddle：http://jsfiddle.net/HZpBG/1/

浮动元素确实“在普通元素流之外”。

Answer 2

只要未在height id的div上明确设置box-cont，您就可以设置：overflow: hidden; JS Fiddle demo。< / p>