将overflow-x/y其中一个设置为visible而另一个不是时的问题

1.问题

       在一次开发过程中，对一个元素设置CSS overflow-x: hidden; and overflow-y: visible; ，理想状况下，在X轴超出部分隐藏，Y轴超出部分显示。然而，元素属性并没有生效。

2.原因

根据W3C的说法，如下

---

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

翻译过来就是：

overflow-x和overflow-y的计算值跟给定的值相同，除了某些跟'visible'值的不合理组合：如果一个其中一个属性的值被赋为'visible'，而另一个被赋值为'scroll'或'auto'，那么'visible'会被重置为'auto'。overflow的计算值与overflow-x相等（如果overflow-y相同的话）；否则就是一对overflow-x和overflow-y的计算值。

---

其实另一个值设置为hidden的时候，visible也会被重置为auto

查了很久，就是不知道当一个属性设置为visible的时候，另一个设置为scroll这些值有啥不合理的地方

今天是2014-4-2，我觉得我知道为啥它会不合理了

咱们都知道overflow的非visible值会使一个块级元素形成一个bfc（块级格式化上下文）

overflow-x设置为visible，overflow-y设置为非visible，那究竟是触发bfc还是不触发bfc呢？此处冲突，所以充值了overflow-x，使其成为一个bfc

计算值，应该不仅仅是overflow的值，还包括一些附带属性，比如此处是否生成一个bfc。

3.解决方法

在目标属性外，嵌套父层，一个设置overflow-x: hidden;另外一个设置， overflow-y: visible; 即可。