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

前端之家收集整理的这篇文章主要介绍了css – 为什么设置溢出会改变子元素的布局?前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
在这个 question中,有人遇到布局问题,因为他们在非浮动div中有两个浮动div.我建议将float:left添加到它们的外部div,这样可以解决问题.其他人建议添加溢出:隐藏,这让我惊讶,也起作用.

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

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

编辑:我发现设置溢出:auto也是如此,所以它似乎不是溢出的重要值,只是它设置了.我还是不明白为什么.

解决方法

除了可见之外的任何内容的溢出都会创建一个新的块格式化上下文,从而导致浮动被包含.这是标准行为.

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).

猜你在找的CSS相关文章