为什么设置溢出改变子元素的布局？ [英] Why does setting overflow alter layout of child elements?

问题描述

在此问题中某人有一个布局问题，因为他们有一个非浮动的div的两个浮动的div。我建议添加 float：left 到它们的外部div，这解决了问题。有人建议添加 overflow：hidden ，这让我感到惊讶，也有效。

所有的都像 overflow：hidden 的目的。显然overflow：hidden导致元素以不同方式查看他们的孩子。我真正想要了解的是这是什么区别。直观地，它应该只使元素小于否则会更大，从不更大，我不明白为什么它会影响布局层次结构。

任何人都可以解释为什么将是正确/必要的行为，或者如果这只是一个浏览器的怪癖？是他们的另一个方面溢出属性我错过了？是否任何一个解决方案比其他任何更好？

编辑：我发现设置 overflow：auto 所以它似乎不是溢出的价值的重要，只是它的设置。我仍然不明白为什么。

解决方案

可见的溢出创建一个新的块格式化上下文，使得包含浮点。这是标准的行为。

浮动，绝对定位
元素，inline-blocks，table-cells，
table-字幕和元素
'overflow'除了'visible'
（除非该值已经被
传播到视口）建立
新的块格式化上下文。 >

在块格式化上下文中，盒子
是从包含块的
开始，一个接一个地布局，
垂直布置。两个兄弟盒之间的垂直
距离是由'margin'属性确定的
。
在块格式化
上下文折叠的相邻
块框之间的垂直边距。

在块格式化上下文中，每个
框的左外边缘触及包含块的左
边（对于
从右到左的格式化，右边缘
touch）。这是真的，即使在
存在浮动（虽然一个盒子的
线框可能收缩，由于
浮动），除非框建立一个
新的块格式化上下文其中
的情况下盒子本身可能变成
缩小由于浮动）。

In this question someone was having a layout problem because they had two floated divs inside a non-floated div. I suggested adding float: left to their outer div, which does fix the problem. Someone else suggested adding overflow: hidden, which to my surprise, also worked.

This doesn't seem at all like the purpose of of overflow: hidden. Clearly overflow: hidden causes elements to view their children differently somehow. What I'm really trying to understand is what that difference is. Intuitively it should only make the element smaller than it would otherwise be, never bigger and I don't see why it would affect the layout hierarchy.

Can anyone explain why this would be correct/necessary behavior or if this is just a browser quirk? Is their another facet to the overflow property I'm missing? Is either solution any better than the other?

Edit: I've discovered setting overflow: auto works too, so it doesn't seem to be the value of overflow that's important, just that it's set. I still don't understand why.

解决方案

Overflow of anything but visible creates a new block formatting context which causes floats to be contained. It's standard behaviour.

Floats, absolutely positioned elements, inline-blocks, table-cells, table-captions, and elements with 'overflow' other than 'visible' (except when that value has been propagated to the viewport) establish new block formatting contexts.

In a block formatting context, boxes are laid out one after the other, vertically, beginning at the top of a containing block. The vertical distance between two sibling boxes is determined by the 'margin' properties. Vertical margins between adjacent block boxes in a block formatting context collapse.

In a block formatting context, each box's left outer edge touches the left edge of the containing block (for right-to-left formatting, right edges touch). This is true even in the presence of floats (although a box's line boxes may shrink due to the floats), unless the box establishes a new block formatting context (in which case the box itself may become narrower due to the floats).

这篇关于为什么设置溢出改变子元素的布局？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！