大家知道CSS overflow 屬性用法嗎?下面我們就來跟大家詳細介紹一下吧！我們累積了一些經驗，在此拿出來與大家分享下，請大家互相指正。
CSS overflow的屬性值：
1. visible: 預設值，內容不會被修剪，會呈現在元素框外；
2. hidden: 內容會被修剪，並且其餘內容是不可見的；
3. scroll: 內容會被修剪，但是瀏覽器會顯示⽰捲軸以便查看其餘的內容；
4. auto: 如果內容被修剪，則瀏覽器會顯示⽰滾動條以便查看其餘內容；
同樣有兩個overflow 的姊妹屬性overflow-y 和overflow-x，它們很少被採用。讓我們分別看一下這幾個數值，並討論一寫共同用法和技巧。
（1）Auto
overflow 的auto 值很像scroll，它唯一解決的是在你不需要的時候也會出現滾動條的問題。
（2）Hidden
預設值visible 的相反的值就是hidden。它會將所有超出盒子的所有內容都給隱藏掉。這對應付使用動態的內容，而且可能會由於內容溢出而引起一些佈局上的問題的確很有用。儘管如此，請記住用此方法隱藏的內容將徹底的看不到(除非去查看原始程式碼)。 例如有的用戶設定他們的瀏覽器的預設字體比你預期的要大些，你會將一些文字推到盒子的外面然後完全的隱藏。
（3）Visible
如果你不設定overflow 屬性，預設的overflow 屬性值就是visible。所以一般而言，並沒有什廬理由特別的設定overflow 的屬性為visible 除非你想覆蓋它在其它地方被設定的值。這裡要記住的重要的事情是，儘管盒子外面的內容是可見的，內容並不會影響頁面的工作流程。一般來說，你至少不用為裡面的內容為文字的盒子設定固定的高度，這樣就不會遇到這種情況了。
（4）Scroll
設定一個盒子的overflow 值為scroll 將會隱藏掉渲染到盒子之外的內容，但是它將會提供一個滾動條在盒子內部滾動，從而可以查看剩餘的內容。值得注意的是，使用scroll 將會同時產生水平和垂直兩個滾動條，就算內容只需要其中一個。
舉例：使用Visible和Hidden屬性值
<!DOCTYPEhtml><html><head><style>div{width:550px;height:100px;margin-top:20px;border:1pxsolidred;}div.hidden{overflow:hidden;}div.scroll{overflow:scroll;}div.hidden{overflow:hidden;}div.scroll{overflow:scroll ;}div.auto{overflow:auto;}</style></head><body><divclass=hid den>visible：預設值，對溢出的內容不做處理，內容會在元素內容區之外顯示；<br>hidden：隱藏溢出元素內容區的內容；<br>scroll：隱藏溢出元素內容區的內容，並在元素的左側和下方分別建立一個滾動條，透過滑動捲軸可以查看元素中的所有內容；<br>auto：如果出現內容溢出，則會在元素左側建立一個捲軸，透過滑動捲軸可以查看元素中的全部內容；<br >inherit：從父元素繼承overflow屬性的值。 </div><divclass=scroll>visible：預設值，對溢出的內容不做處理，內容會在元素內容區之外顯示；<br>hidden：隱藏溢出元素內容區的內容；<br>scroll：隱藏溢出元素內容區的內容，並在元素的左側和下方分別建立一個捲軸，透過滑動捲軸可以查看元素中的所有內容；<br>auto：如果出現內容溢出，則會在元素左側建立一個捲軸，透過滑動捲軸可以查看元素中的全部內容；<br>inherit：從父元素繼承overflow屬性的值。 </div><divclass=auto>visible：預設值，對溢出的內容不做處理，內容會在元素內容區之外顯示；<br>hidden：隱藏溢出元素內容區的內容；<br>scroll：隱藏溢出元素內容區的內容，並在元素的左側和下方分別建立一個捲軸，透過滑動捲軸可以查看元素中的所有內容；<br>auto：如果出現內容溢出，則會在元素左側建立一個捲軸，透過滑動捲軸可以查看元素中的全部內容；<br>inherit：從父元素繼承overflow屬性的值。 </div></body></html>運行結果：
