overflow：hidden是overflow屬性的一個神奇用法，它可以幫助我們隱藏溢出的元素，清除浮動和解除坍塌。
下面的代碼將作為基本演示代碼：
CSS樣式：
.container{
background-color: black;
}
.div1{
background-color: aqua;
width: 100px;
height: 100px;
}
.div2{
background-color: red;
width: 100px;
height: 100px;
}
html內容：
<div class="container">
<div class="div1"></div>
<div class="div2"></div>
</div>
程序運行效果：
1.使用overflow：hidden隱藏溢出
當父div擁有固定的高度時，比如height:500px,我們使用overflow:hidden來隱藏溢出。
當使用div+css布局時，會出現很多的div嵌套——父div內嵌套一個或多個的子div，默認情況下，父div的高度是auto——它可以被子div任意的撐大。然而父div也可以有固定的高度(或寬度)，比如height:500px，那么如果子div的高度超過了這個值，在默認情況下，子div會超出父div的束縛，這就是溢出。我們可以通過設置父div的CSS屬性——overflow來對子div進行控制。這里使用overflow:hidden來隱藏子元素溢出的部分。
2.使用overflow：hidden清除浮動
當父元素的高height:auto時，我們使用overflow：hidden清除浮動
當我們為div1和div2加上一個屬性：float:left后，我們會發現：背景色為黑色父div消失了，這是因為： 浮動的元素脫離文檔元素， 不占據空間。 不浮動的元素會直接無視掉這個元素：父div無視了自己的兩個孩子，其高度為0（因為我們沒有設置父div的高度），所以父div沒有顯現。
想讓父div“寬容的”接受自己的兩個孩子有兩個辦法：
-
第一個就是讓父親也浮動起來，我們試著給父div添加一個CSS屬性：float:right,會發現兩個顏色塊出現在了屏幕的右邊，依然沒有父div的身影，然而通過開發人員工具不難看出父div已經包容子div 。
這是因為浮動的div已經失去了其“獨霸一行”的能力，我們需要手動為父div設置一個寬度，比如width:500px，之后可以看到：
（2）第二種就是為父親添加overflow:hidden屬性用以清除浮動.container{
background-color: black;
overflow:hidden;
}
這時的效果如圖所示：
3.解除坍塌
可以使用overflow:hidden解除margin坍塌，當然了，坍塌是不分父div的高度是否固定的 首先要知道什么叫做坍塌： 我們為div1添加一個屬性：margin-top:50px,我們想象中效果是這樣的：
.container{
background-color: black;
overflow: hidden;
}
（2）會思考的讀者一定會考慮浮動能不能解決這個煩人的問題，這里為了排除overflow:hidden對未定高度的父div的影響，我們為父div設置一個高度：
.container{
background-color: black;
height: 200px;
}
我們為所有子div添加一個浮動屬性（比如float:left），顯而易見，只要是浮動的子div就會完全避免坍塌的問題（PS：無論父div是否浮動）：
4.總結
overflow:hidden的用法在溢出和清除浮動上主要針對父div是否有固定的高度加以區分。它還額外肩負了解除坍塌的重任。
