假设你有一个div,说你把它涂成绿色并给它一个明确的宽度,当我把东西放进去时,在我的情况下是一个img和另一个div.这个想法是容器div的内容将导致容器div伸展出来,并成为内容的背景.但是当我这样做时,包含的div缩小以适应非浮动对象,并且浮动对象将要么一直出来,要么是一半,一半,并且与大div的大小没有任何关系.
为什么是这样？有没有我缺少的东西,我怎样才能获得浮动的物品来拉伸包含div的高度？
我对网页的一个常见问题是浮动div在其容器外蔓延.
#wrapper{
border:1px solid red;
}
#wrapper div{
float:left;
font-size: 3em;
}
...
<div id="wrapper">
<div>Hello World</div>
</div>
实例:http://jsfiddle.net/ugUVa/1/
有很多肮脏的方法来解决这个问题(插入一个明确的div:两者)
我看到的一个更简洁的解决方案是将包装器divs溢出样式设置为隐藏:
示例:http://jsfiddle.net/ugUVa/2/
这适用于各种浏览器,非常干净,没有额外的标记.我很高兴,但我不知道为什么它有效!
我查看的所有文档都表明溢出:隐藏是隐藏内容,而不是调整父级的大小以适应其子级...
有人可以为这种行为提供解释吗？
谢谢