定義
overflow 屬性規定當內容溢出元素框時發生的事情。
- visible： 默認值。內容不會被修剪，會呈現在元素框之外。
- hidden： 內容會被修剪，並且其餘內容是不可見的。
- scroll： 內容會被修剪，但是瀏覽器會顯示滾動條以便查看其餘的內容。
- auto： 如果內容被修剪，則瀏覽器會顯示滾動條以便查看其餘的內容。
- inherit： 規定應該從父元素繼承 overflow 屬性的值。
使用情況
本文重點說明一下overflow: hidden;。這個屬性通常用在以下2種情況種：
- 內容不超出元素框時設置overflow: hidden;即可裁剪超出部分，這種情況也是最常用的；
清除浮動的時候(Float Clearing),給父級元素設置這個屬性就可以清除浮動，如下圖：
坑點
由於現在通常用僞元素來清除浮動，所以在浮動元素的外層一般就不加這個屬性了，那麼這樣PC的網頁如果內容超過1000px或者更多的時候在手機下查看PC網頁就會出現右側有一定的空白出現，出現這個問題的原因是當內容的寬度很大時，其外層元素即使設置寬度100%也只是viewport的寬度。所以內容的實際寬度超出了顯示網頁的寬度，那麼右側便出現了空白，下圖列出了一些設備上瀏覽器的默認viewport的寬度。
解決的辦法就是給需要的父級元素加上overflow: hidden;