为什么设置溢出会改变子元素的布局?

Bra*_*ace 8 css overflow css-float

在这个问题中,有人遇到了布局问题,因为他们在非浮动div中有两个浮动的div.我建议添加float: left到他们的外部div,这确实解决了问题.其他人建议添加overflow: hidden,令我惊讶的是,也有用.

这似乎完全没有目的overflow: hidden.显然溢出:隐藏导致元素以某种方式以不同方式查看他们的孩子.我真正想要了解的是这有什么区别.直观地说,它应该只使元素小于它本来可以的,从不大,我不明白它为什么会影响布局层次结构.

任何人都可以解释为什么这将是正确/必要的行为,或者这只是一个浏览器怪癖?他们的另一个方面是我失踪的溢出财产吗?两种解决方案都比另一种更好吗?

编辑:我发现设置overflow: auto也是如此,所以看起来溢出的重要性并不重要,只是它设置了.我还是不明白为什么.

med*_*iev 15

溢出任何东西,但visible会创建一个新的块格式化上下文,导致浮动被包含.这是标准行为.

浮点数,绝对定位元素,内联块,表格单元格,表格标题以及除"可见"以外的"溢出"元素(除非该值已传播到视口时)建立新的块格式化上下文.

在块格式化上下文中,框从一个包含块的顶部开始一个接一个地垂直排列.两个兄弟框之间的垂直距离由"边距"属性决定.块格式化上下文中相邻块框之间的垂直边距折叠.

在块格式化上下文中,每个框的左外边缘触摸包含块的左边缘(从右到左格式化,右边缘触摸).即使存在浮动也是如此(尽管盒子的线框可能因浮动而缩小),除非盒子建立了新的块格式化上下文(在这种情况下,盒子本身可能因浮动而变窄).