前段時間做一個頁面的時候，遇到一些樣式上的問題：由于layout的關系，在我需要顯示最外div橫向滾動條和縱向滾動條時，遇到了一些阻礙，因此也借此機會，研究了一下div的overflow屬性，下面給大家分享一下：
1.overflow屬性多用于div，其作用是：規定當內容溢出元素框時發生的事情；
2.所有主流瀏覽器都支持 overflow 屬性，因此可以放心使用；
3.overflow可分別設置x軸或者y軸（即overflow-x:，overflow-y:），也可以對兩者同時進行設置（overflow:）
4.overflow有以下這些屬性：
visible 默認值。內容不會被修剪，會呈現在div之外。
hidden 內容會被修剪，并且其余內容是不可見的。
scroll 內容會被修剪，但是瀏覽器會顯示滾動條以便查看其余的內容。
auto 如果內容被修剪，則瀏覽器會顯示滾動條以便查看其余的內容。
inherit 規定應該從父元素繼承 overflow 屬性的值。（注：所有IE瀏覽器都不支持inherit屬性）
普遍來說，auto屬性比較常用，一般y軸都會生成滾動條，而x軸的滾動條并不多見。特別是使用了bootstrap等框架后，利用其分欄功能搭建的div，會有效利用瀏覽器的橫向寬度（將100%的寬度等分成12格，如果一行排列的元素超過12格，則會自動換行），因此一般不會出現橫向滾動條。
我上面說到遇到的具體問題是這樣的：我的頁面布局，是比較常見的，最外層是一個大div，當中的上部是設置菜單，左下是真正的菜單，右下是主體內容顯示區域。我現在需要在右下的主體內容區域中做一個頁面，這個頁面會顯示sql查詢語句返回的內容，動態生成一個table，這個table的寬度可能會非常寬，因此我需要顯示x軸滾動條。
如果單純顯示右下div的滾動條，那會有一個問題：如果頁面高度很高（sql返回的結果數較多），則必須要將頁面y軸滾動條拉動之最底端，才能看到x軸的滾動條，這顯然是非常不方便的。
如果光設置最外層div的滾動條，則y軸會出現兩個滾動條，這也是不能接受的。
最終的方案是這樣的：
右下的div，overflow設置成visible，最外層的div，overflow設置成auto（當然，這只是針對我這個特殊的頁面，因此直接在view里重寫并覆蓋html和body的overflow屬性，其余頁面不受影響）
大家可以根據自己的實際需要，試著調整一下overflow的屬性，多試幾次，自然會理解這幾個屬性的作用的區別了。
