基本演示程式碼：
HTML程式碼：

<div class="box">
    <div class="box1"></div>
    <div class="box2"></div>
</div>

CSS程式碼：

*{ margin: 0; padding: 0; }
.box{ background: #333; }
.box1{ background: orange; width: 100px; height: 100px; }
.box2{ background: green; width: 100px; height: 100px
 
; }

效果：

1.使用overflow：hidden隱藏溢位
當父div擁有固定的高度時，比如height:150px,我們使用overflow:hidden來隱藏溢位。
當使用div+css佈局時，會出現很多的div巢狀——父div內巢狀一個或多個的子div，預設情況下，父div的高度是auto——它可以被子div任意的撐大。然而父div也可以有固定的高度(或寬度)，比如height:150px，那麼如果子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“寬容的”接受自己的兩個孩子有兩個辦法：
（1）第一個就是讓父親也浮動起來，我們試著給父div新增一個CSS屬性：float:right,會發現兩個顏色塊出現在了螢幕的右邊，依然沒有父div的身影，然而通過開發人員工具不難看出父div已經包容子div ；這是因為浮動的div已經失去了其“獨霸一行”的能力，我們需要手動為父div設定一個寬度，比如width:500px，之後可以看到：

（2）第二種就是為父親新增overflow:hidden屬性用以清除浮動；

清除浮動可以用 overflow:hidden 或 overflow:auto ，在比較標準的瀏覽器裡沒有問題，但 IE6 沒有效果，為了相容 IE6 ，可以為父元素：
1、設定一個合適的寬度，但“合適的寬度”有的時候不好掌握；
2、加上 height:1% ，什麼都不用管，加上就有效，我還沒有發現缺點；
3、加上 zoom:1 ，不能通過W3C驗證。
3.解除坍塌
可以使用overflow:hidden解除margin坍塌，當然了，坍塌是不分父div的高度是否固定的 ；
首先要知道什麼叫做坍塌：
我們為box1新增一個屬性：margin-top:50px,我們想象中效果是這樣的：

但實際上是這樣的（這是開發人員工具下的效果）:

上端距離瀏覽器的頂部有50px而不是對它的父div，更可怕的是它甚至向下頂了它的父div，這就是坍塌。這裡多說一句：這種坍塌只針對於父親的第一個兒子，div2設定margin-top：50px則不會有任何不妥。
（1）我們可以為父div新增overflow:hidden解決這個問題;
（2）這裡為了排除overflow:hidden對未定高度的父div的影響，我們為父div設定一個高度；我們為所有子div新增一個浮動屬性（比如float:left），顯而易見，只要是浮動的子div就會完全避免坍塌的問題（PS：無論父div是否浮動）；
總結
overflow:hidden的用法在溢位和清除浮動上主要針對父div是否有固定的高度加以區分。它還額外肩負瞭解除坍塌的重任。