html - 子元素脱离父元素，即使父元素没有设置高度？

Question

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

我的 #box-cont 没有设置高度，这通常(至少从我的经验来看)意味着它采用所有嵌套元素的总高度 + 任何填充。

但是，.valid 和 .invalid(据我所知包含在 #box-cont 中)似乎是从底部流出，不仅是 #box-cont，还有 .box-bottom。

关于这个问题，谁能指出为什么会这样？

我来回尝试诊断问题是什么无济于事:(。

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

Answer 1

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

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

更新的 jsFiddle:http://jsfiddle.net/HZpBG/1/

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