overflow

2017-04-15

使用overflow:visible以外的值，将创建一个新的 块级格式化上下文———如果一个浮动元素和滚动条相交，它（BFC）会强制包围内容元素，滚动条每次移动都会发生此行为，因此会使得滚动体验变差

为了使overflow有效，块级容器必须有一个指定的高度（height或者max-height）或者将white-space设置为nowrap （一个是竖直方向的overflow，一个是水平方向的overflow）

//overflow只对block属性的元素有效,显然table，table-cell不在其中(table就是随着内容而撑开的，因此直接设置overflow无效，如果非要设置，先在table-cell中添加另一个block元素，再对此block类型的元素设置overflow属性)

overflow-x 和 overflow-y

pay_coupon.png

在某项目中，遇到一个问题，父元素有max-height，当内容超过一定高度时必须让内容隐藏，同时出现滚动条；但是由于盒子内有 hover后出现的position:absolute元素，当为外面的大盒子设置overflow:hidden的时候，虽然在竖直方向上能达到想要的效果(即 父元素随着子元素的增加而变高，到max-height后出现滚动条)，但是在水平方向上，绝对定位的元素同样也会一起被遮盖掉，并出现水平滚动条,查了查overflow的特性，发现还有overflow-x和overflow-y这两个特性

开始的时候想当让的以为这两个属性可以分别设置，让元素在水平和竖直两个方向上的overflow表现形式不一样，但是结果错的离谱

如果两个都为overflow：visible那么 都可以设置为visible；只要有一个与visible不同，那么另外的那个visible就会自动变为auto；

The computed values of ‘overflow-x’ and ‘overflow-y’ are the same as their specified values, except that some combinations with ‘visible’ are not possible: if one is specified as ‘visible’ and the other is ‘scroll’ or ‘auto’, then ‘visible’ is set to ‘auto’. The computed value of ‘overflow’ is equal to the computed value of ‘overflow-x’ if ‘overflow-y’ is the same; otherwise it is the pair of computed values of ‘overflow-x’ and ‘overflow-y’.

If you are using visible for either overflow-x or overflow-y and something other than visible for the other. The visible value is interpreted as auto.