網頁的設定為了直觀，很多時候並不是正好滿足一頁，例如一些新聞網站，為了使用數據的分頁加載，如果想看更多的文字，需要不停的往下滑動，在瀏覽器的右邊會一直存在著一個捲軸，這就是這篇講解的元素，在網頁中當一頁無法容納所有資料的時候，我們經常用overflow進行設定。
overflow屬性的作用是規定當內容溢出元素框時發生的事情，定義溢出元素內容區的內容會如何處理。
1.overflow
為了能更好的處理溢出的內容，CSS 中提供了一個名為overflow 的屬性，該屬性可以設定如何處理溢出元素內容區的內容，屬性的可選值如下表所示：
舉例說明：
<!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=hidden>網頁的設定為了直觀，很多時候並不是正好滿足一頁，例如一些新聞網站，為了使用數據的分頁加載，如果想看更多的文字，需要不停的往下滑動，在瀏覽器的右邊會一直存在著一個滾動條，這就是本篇講解的元素，在網頁中當一頁無法容納所有數據的時候，我們常用overflow來設定。 overflow屬性的作用是規定當內容溢出元素框時發生的事情，定義溢出元素內容區的內容會如何處理。 </div><divclass=scroll>網頁的設定為了直觀，很多時候並不是正好滿足一頁，例如一些新聞網站，為了使用數據的分頁加載，如果想看更多的文字，需要不停的往下滑動，在瀏覽器的右邊會一直存在著一個捲軸，這就是本篇講解的元素，在網頁中當一頁無法容納所有資料的時候，我們經常用overflow進行設定。 overflow屬性的作用是規定當內容溢出元素框時發生的事情，定義溢出元素內容區的內容會如何處理。 </div><divclass=auto>網頁的設定為了直觀，很多時候並不是正好滿足一頁，例如一些新聞網站，為了使用數據的分頁加載，如果想看更多的文字，需要不停的往下滑動，在瀏覽器的右邊會一直存在著一個捲軸，這就是本篇講解的元素，在網頁中當一頁無法容納所有資料的時候，我們經常用overflow進行設定。 overflow屬性的作用是規定當內容溢出元素框時發生的事情，定義溢出元素內容區的內容會如何處理。 </div></body></html>運行結果：
2.overflow-x、overflow-y
在CSS3 中也提供了overflow-x 和overflow-y 兩個屬性，它們的作用與overflow 屬性相似，屬性的可選值與overflow 屬性相同，其中：
overflow-x：設定當元素內容區的內容在水平方向上溢出元素時如何處理溢出的內容；
overflow-y：設定當元素內容區的內容在垂直方向上溢出元素時如何處理溢出的內容。
3.overflow的神奇用法
第一種用法：解決margin-top的傳遞問題
margin-top的傳遞問題：子元素的margin-top會把父元素一起帶下來，給父元素加overflow:hidden即可解決
第二種用法：清除浮動帶來的影響－父元素高度塌陷
萬能清除法
overflow:hidden
clear:both
第三種用法：顯隱動畫－超越隱藏
第四種用法：單行文字超出省略
舉例：
<!DOCTYPEhtml><html><head><metacharset=utf-8><title>dotcpp程式設計</title><styletype=text/css>#{margin:0px;padding:0px;}section{width:800px; height:460px;margin:auto;}article{float:left;width:200px;height:460px;overflow:hidden;}h3{font-size:16px;font-weight:bold;margin:10px50px}p{margin :10px50px;}.chapter_1{background-color:#A3A3A3;}.chapter_2{background-color:#81559d;}.chapter_3{background-color:#54709d;}.chapter_4{background-color:#490:#54709d;}.chapter_4{background-color:#49. hover>article{overflow:hidden;width:50px;}section>article:hover{width:650px;}</style></head><body><section><articleclass=chapter_1><h3>第一卷< /h3><p>歡迎來到C語言的世界！ C語言是一種強大的專業化程式語言，深受業餘和專業程式設計人員的歡迎。在學習之前先讓我們了解和認識它！ C語言的原型是A語言（ALGOL60語言）。 </p></article><articleclass=chapter_2><h3>第二卷</h3><p>歡迎來到C語言的世界！ C語言是一種強大的專業化程式語言，深受業餘和專業程式設計人員的歡迎。在學習之前先讓我們了解和認識它！ C語言的原型是A語言（ALGOL60語言）。 </p></article><articleclass=chapter_3><h3>第三卷</h3><p>歡迎來到C語言的世界！ C語言是一種強大的專業化程式語言，深受業餘和專業程式設計人員的歡迎。在學習之前先讓我們了解和認識它！ C語言的原型是A語言（ALGOL60語言）。 </p></article><articleclass=chapter_4><h3>第四卷</h3><p>歡迎來到C語言的世界！ C語言是一種強大的專業化程式語言，深受業餘和專業程式設計人員的歡迎。在學習之前先讓我們了解和認識它！ C語言的原型是A語言（ALGOL60語言）。 </p></article></section></body></html>運行結果：
