overflow:hidden是大家常用到的CSS樣式，但是大多數人對這個樣式的理解僅僅局限於隱藏溢出，而對於清除浮動這個含義不是很了解。
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
#div1{
width: 200px;
/*height: 50px;*/
padding: 10px 20px 20px 10px;
background: red;
margin: 0 auto;
}
#div2{
width: 100px;
height: 100px;
background: green;
float: left;
}
</style>
</head>
<body>
<div id="div1" >
<div id="div2" ></div>
</div>
</body>
</html>
圖中代碼定義了兩個div，並且子div是規定左浮動的。不難想像瀏覽器中打開的效果圖：
當父div沒有規定height值，子div浮動后，父div只剩下padding-top+padding-bottom的30px.
如何讓子div再次將父div的高度撐開呢？固然將父div也浮動起來是比較常用的做法，其實還可以使用overflower:hidden來清除浮動帶來的影響。
#div1{
width: 200px;
/*height: 50px;*/
padding: 10px 20px 20px 10px;
background: red;
margin: 0 auto;
overflow: hidden;
}
效果如下:
當然，我們以前用的最多的還是使用overflow:hidden來隱藏子元素相對於父元素的超界溢出，如下所示。
#div1{
width: 200px;
height: 50px;
padding: 10px 20px 20px 10px;
background: red;
margin: 0 auto;
overflow: hidden;
}
給父div加上固定高度后，再使用overflow: hidden將會隱藏掉子元素超出的那一部分，如下圖：
，因此我們可以嘗試這樣總結：當父元素的高度是靠子元素撐開的時候，子元素浮動時，則在父元素使用overflow: hidden可以清除浮動，使得父元素的高度依舊是靠子元素撐開。
當父元素自身設置了height屬性值，則在父元素使用overflow: hidden可以使子元素超出父元素的那部分隱藏。