網(wǎng)頁(yè)的設(shè)置為了直觀，很多時(shí)候并不是正好滿足一頁(yè)，例如一些新聞網(wǎng)站，為了使用數(shù)據(jù)的分頁(yè)加載，如果想看更多的文字，需要不停的往下滑動(dòng)，在瀏覽器的右邊會(huì)一直存在著一個(gè)滾動(dòng)條，這就是本篇講解的元素，在網(wǎng)頁(yè)中當(dāng)一頁(yè)無(wú)法容納所有數(shù)據(jù)的時(shí)候，我們經(jīng)常用overflow進(jìn)行設(shè)定。
overflow屬性的作用是規(guī)定當(dāng)內(nèi)容溢出元素框時(shí)發(fā)生的事情，定義溢出元素內(nèi)容區(qū)的內(nèi)容會(huì)如何處理。
1. overflow
為了能更好的處理溢出的內(nèi)容，CSS 中提供了一個(gè)名為 overflow 的屬性，該屬性可以設(shè)置如何處理溢出元素內(nèi)容區(qū)的內(nèi)容，屬性的可選值如下表所示：
| 值 | 描述 |
| visible | 默認(rèn)值，對(duì)溢出的內(nèi)容不做處理，內(nèi)容會(huì)在元素內(nèi)容區(qū)之外顯示 |
| hidden | 隱藏溢出元素內(nèi)容區(qū)的內(nèi)容 |
| scroll | 隱藏溢出元素內(nèi)容區(qū)的內(nèi)容，并在元素的左側(cè)和下方分別創(chuàng)建一個(gè)滾動(dòng)條，通過(guò)滑動(dòng)滾動(dòng)條可以查看元素中的所有內(nèi)容 |
| auto | 如果出現(xiàn)內(nèi)容溢出，則會(huì)在元素左側(cè)創(chuàng)建一個(gè)滾動(dòng)條，通過(guò)滑動(dòng)滾動(dòng)條可以查看元素中的全部?jī)?nèi)容 |
| inherit | 從父元素繼承 overflow 屬性的值 |
舉例說(shuō)明：
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 550px;
height: 100px;
margin-top: 20px;
border: 1px solid red;
}
div.hidden {
overflow: hidden;
}
div.scroll {
overflow: scroll;
}
div.auto {
overflow: auto;
}
</style>
</head>
<body>
<div class="hidden">
網(wǎng)頁(yè)的設(shè)置為了直觀，很多時(shí)候并不是正好滿足一頁(yè)，例如一些新聞網(wǎng)站，為了使用數(shù)據(jù)的分頁(yè)加載，
如果想看更多的文字，需要不停的往下滑動(dòng)，在瀏覽器的右邊會(huì)一直存在著一個(gè)滾動(dòng)條，這就是本篇
講解的元素，在網(wǎng)頁(yè)中當(dāng)一頁(yè)無(wú)法容納所有數(shù)據(jù)的時(shí)候，我們經(jīng)常用overflow進(jìn)行設(shè)定。
overflow屬性的作用是規(guī)定當(dāng)內(nèi)容溢出元素框時(shí)發(fā)生的事情，定義溢出元素內(nèi)容區(qū)的內(nèi)容會(huì)如何處理。
</div>
<div class="scroll">
網(wǎng)頁(yè)的設(shè)置為了直觀，很多時(shí)候并不是正好滿足一頁(yè)，例如一些新聞網(wǎng)站，為了使用數(shù)據(jù)的分頁(yè)加載，
如果想看更多的文字，需要不停的往下滑動(dòng)，在瀏覽器的右邊會(huì)一直存在著一個(gè)滾動(dòng)條，這就是本篇
講解的元素，在網(wǎng)頁(yè)中當(dāng)一頁(yè)無(wú)法容納所有數(shù)據(jù)的時(shí)候，我們經(jīng)常用overflow進(jìn)行設(shè)定。
overflow屬性的作用是規(guī)定當(dāng)內(nèi)容溢出元素框時(shí)發(fā)生的事情，定義溢出元素內(nèi)容區(qū)的內(nèi)容會(huì)如何處理。
</div>
<div class="auto">
網(wǎng)頁(yè)的設(shè)置為了直觀，很多時(shí)候并不是正好滿足一頁(yè)，例如一些新聞網(wǎng)站，為了使用數(shù)據(jù)的分頁(yè)加載，
如果想看更多的文字，需要不停的往下滑動(dòng)，在瀏覽器的右邊會(huì)一直存在著一個(gè)滾動(dòng)條，這就是本篇
講解的元素，在網(wǎng)頁(yè)中當(dāng)一頁(yè)無(wú)法容納所有數(shù)據(jù)的時(shí)候，我們經(jīng)常用overflow進(jìn)行設(shè)定。
overflow屬性的作用是規(guī)定當(dāng)內(nèi)容溢出元素框時(shí)發(fā)生的事情，定義溢出元素內(nèi)容區(qū)的內(nèi)容會(huì)如何處理。
</div>
</body>
</html>運(yùn)行結(jié)果：
2. overflow-x、overflow-y
在 CSS3 中還提供了 overflow-x 和 overflow-y 兩個(gè)屬性，它們的作用與 overflow 屬性相似，屬性的可選值與 overflow 屬性相同，其中：
overflow-x：設(shè)置當(dāng)元素內(nèi)容區(qū)的內(nèi)容在水平方向上溢出元素時(shí)如何處理溢出的內(nèi)容；
overflow-y：設(shè)置當(dāng)元素內(nèi)容區(qū)的內(nèi)容在垂直方向上溢出元素時(shí)如何處理溢出的內(nèi)容。
3. overflow的神奇用法
第一種用法：解決margin-top的傳遞問(wèn)題
margin-top的傳遞問(wèn)題：子元素的margin-top會(huì)把父元素一起帶下來(lái)，給父元素加overflow:hidden即可解決
第二種用法：清除浮動(dòng)帶來(lái)的影響——父元素高度塌陷
萬(wàn)能清除法
overflow:hidden
clear:both
第三種用法：顯隱動(dòng)畫(huà)——超出隱藏
第四種用法：?jiǎn)涡形谋境鍪÷?/p>
舉例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>dotcpp編程</title>
<style type="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: 10px 50px;}
p{ margin: 10px 50px;}
.chapter_1 { background-color: #A3A3A3;}
.chapter_2 { background-color: #81559d;}
.chapter_3 { background-color: #54709d;}
.chapter_4 { background-color: #4f9d89;}
section:hover>article{
overflow: hidden;
width: 50px;
}
section>article:hover {
width: 650px;
}
</style>
</head>
<body>
<section>
<article class="chapter_1">
<h3>第一卷</h3>
<p>歡迎來(lái)到C語(yǔ)言的世界！C語(yǔ)言是一種強(qiáng)大的專業(yè)化編程語(yǔ)言，深受業(yè)余和專業(yè)編程人員的歡迎。
在學(xué)習(xí)之前先讓我們了解和認(rèn)識(shí)它！C語(yǔ)言的原型是A語(yǔ)言（ALGOL 60語(yǔ)言）。</p>
</article>
<article class="chapter_2">
<h3>第二卷</h3>
<p>歡迎來(lái)到C語(yǔ)言的世界！C語(yǔ)言是一種強(qiáng)大的專業(yè)化編程語(yǔ)言，深受業(yè)余和專業(yè)編程人員的歡迎。
在學(xué)習(xí)之前先讓我們了解和認(rèn)識(shí)它！C語(yǔ)言的原型是A語(yǔ)言（ALGOL 60語(yǔ)言）。</p>
</article>
<article class="chapter_3">
<h3>第三卷</h3>
<p>歡迎來(lái)到C語(yǔ)言的世界！C語(yǔ)言是一種強(qiáng)大的專業(yè)化編程語(yǔ)言，深受業(yè)余和專業(yè)編程人員的歡迎。
在學(xué)習(xí)之前先讓我們了解和認(rèn)識(shí)它！C語(yǔ)言的原型是A語(yǔ)言（ALGOL 60語(yǔ)言）。</p>
</article>
<article class="chapter_4">
<h3>第四卷</h3>
<p>歡迎來(lái)到C語(yǔ)言的世界！C語(yǔ)言是一種強(qiáng)大的專業(yè)化編程語(yǔ)言，深受業(yè)余和專業(yè)編程人員的歡迎。
在學(xué)習(xí)之前先讓我們了解和認(rèn)識(shí)它！C語(yǔ)言的原型是A語(yǔ)言（ALGOL 60語(yǔ)言）。</p>
</article>
</section>
</body>
</html>運(yùn)行結(jié)果：
C語(yǔ)言網(wǎng)提供由在職研發(fā)工程師或ACM藍(lán)橋杯競(jìng)賽優(yōu)秀選手錄制的視頻教程，并配有習(xí)題和答疑，點(diǎn)擊了解：
一點(diǎn)編程也不會(huì)寫(xiě)的：零基礎(chǔ)C語(yǔ)言學(xué)練課程
解決困擾你多年的C語(yǔ)言疑難雜癥特性的C語(yǔ)言進(jìn)階課程
從零到寫(xiě)出一個(gè)爬蟲(chóng)的Python編程課程
只會(huì)語(yǔ)法寫(xiě)不出代碼？手把手帶你寫(xiě)100個(gè)編程真題的編程百練課程
信息學(xué)奧賽或C++選手的 必學(xué)C++課程
藍(lán)橋杯ACM、信息學(xué)奧賽的必學(xué)課程：算法競(jìng)賽課入門(mén)課程
手把手講解近五年真題的藍(lán)橋杯輔導(dǎo)課程