• overflow屬性

如果元素中的內容超出了給定的寬度和高度屬性，overflow 屬性可以確定是否顯示滾動條，是否隱藏溢出部分等行為，規定當內容溢出元素框時發生的事情。

• 可能的值有：

visible：默認值。內容不會被修剪，會呈現在元素框之外。

hidden：內容會被修剪，并且其余內容是不可見的。

scroll：內容會被修剪，但是瀏覽器會顯示滾動條以便查看其余的內容。

auto：內容會被修剪，但是瀏覽器會顯示滾動條以便查看其余的內容。

inherit：規定應該從父元素繼承 overflow 屬性的值。

• overflow-x與overflow-y

overflow-x主要用來定義對水平方向內容溢出的剪切，而overflow-y主要用來定義對垂直方向內容溢出的剪切，如果overflow-x和overflow-y值相同則等同于overflow。如果overflow-x和overflow-y值不同，且其中一個值顯式設置為visible或者默認為visible，而另外一個值是非visible的值。則visible值會被重置為auto。

我們看下面這個小例子，div2在水平方向超出了容器div1，我們將div1的overflow-x設置為visible，overflow-y設置為scroll，但是發現水平方向并沒有顯示多余的部分，而是出現了水平滾動條，可見overflow-x被重置為auto了。同樣，div2中文字在豎直方向超出了容器，我們將div2的overflow-y設置為visible，overflow-x設置為hidden，但是發現豎直方向并沒有隱藏多余的部分，而是出現了豎直方向的滾動條，可見overflow-y也被重置為auto了。

如果子元素為絕對定位元素，而父元素沒有定位時，給父元素設置overflow并不起作用。就像下圖，div2為絕對定位元素，給div1設置了overflow：hidden之后它超出div1的部分并沒有被裁掉。只要給父元素設置定位position:absolute，fixed或relative之后就可以了。

總結

以上是生活随笔為你收集整理的CSS中的overflow属性的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。