當overflow-x和overflow-y其中一個設定為visible時，如果另一個不是visible，那麼它會被自動重置為auto

看看效果先：

第一次遇到這個問題時，我還以為是chrome的一個bug，結果測試了一下，所有瀏覽器都是這樣的，

看一下效果

.div1 {
    width: 100px;
    height: 100px;
    background: #eee;
    position: relative;
    overflow-x: hidden;
    overflow-y: visible;
}
.div2 {
    width: 100px;
    height
 
: 100px;
    background: #f00;
    position: absolute;
    left: 50px;
    top: 50px;
}
<div class="div1">
    <div class="div2"></div>
</div>

理想中的效果是

但是結果卻是

我只能說，這太不合理了，對於這個問題，w3c規範是這麼說的

The computed values of ‘overflow-x’ and ‘overflow-y’ are the same as their specified values, except that some combinations with ‘visible

翻譯過來就是：

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