这可能很难解释,所以为了更好地衡量,我在 JsFiddle 上放置了一个模型:http://jsfiddle.net/HZpBG/
我的 #box-cont
没有设置高度,这通常(至少从我的经验来看)意味着它采用所有嵌套元素的总高度 + 任何填充。
但是,.valid
和 .invalid
(据我所知包含在 #box-cont
中)似乎是从底部流出,不仅是 #box-cont
,还有 .box-bottom
。
关于这个问题,谁能指出为什么会这样?
我来回尝试诊断问题是什么无济于事:(。
任何帮助将不胜感激 ;)!!
最佳答案
您需要将 clear: both;
添加到 box-bottom
类:
.box-bottom {
width: 500px;
height: 20px;
background: #000 no-repeat;
clear: both;
}
更新的 jsFiddle:http://jsfiddle.net/HZpBG/1/
float 元素确实在普通元素流“之外”。
关于html - 子元素脱离父元素,即使父元素没有设置高度?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/7145282/