2017-04-15
使用overflow:visible以外的值，將創(chuàng)建一個新的 塊級格式化上下文———如果一個浮動元素和滾動條相交，它（BFC）會強制包圍內(nèi)容元素，滾動條每次移動都會發(fā)生此行為，因此會使得滾動體驗變差
為了使overflow有效，塊級容器必須有一個指定的高度（height或者max-height）或者將white-space設(shè)置為nowrap （一個是豎直方向的overflow，一個是水平方向的overflow）
//overflow只對block屬性的元素有效,顯然table，table-cell不在其中(table就是隨著內(nèi)容而撐開的，因此直接設(shè)置overflow無效，如果非要設(shè)置，先在table-cell中添加另一個block元素，再對此block類型的元素設(shè)置overflow屬性)
overflow-x 和 overflow-y
在某項目中，遇到一個問題，父元素有max-height，當(dāng)內(nèi)容超過一定高度時必須讓內(nèi)容隱藏，同時出現(xiàn)滾動條；但是由于盒子內(nèi)有 hover后出現(xiàn)的position:absolute元素，當(dāng)為外面的大盒子設(shè)置overflow:hidden的時候，雖然在豎直方向上能達到想要的效果(即 父元素隨著子元素的增加而變高，到max-height后出現(xiàn)滾動條)，但是在水平方向上，絕對定位的元素同樣也會一起被遮蓋掉，并出現(xiàn)水平滾動條,查了查overflow的特性，發(fā)現(xiàn)還有overflow-x和overflow-y這兩個特性
開始的時候想當(dāng)讓的以為這兩個屬性可以分別設(shè)置，讓元素在水平和豎直兩個方向上的overflow表現(xiàn)形式不一樣，但是結(jié)果錯的離譜
如果兩個都為overflow：visible那么 都可以設(shè)置為visible；只要有一個與visible不同，那么另外的那個visible就會自動變?yōu)閍uto；
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 ‘a(chǎn)uto’, then ‘visible’ is set to ‘a(chǎn)uto’. 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.
