overflow：hidden是overflow屬性的一個神奇用法，它可以幫助我們隱藏溢出的元素，清除浮動和解除坍塌。當(dāng)某一個屬性擁有這么多的功能時，難免使人難以把握，不過不要怕，只要信：看完這篇文章，我相信你絕對能對overflow:hidden的用法熟練掌握。

下面的代碼將作為基本演示代碼，每次講解一個新的作用，我們都要將代碼恢復(fù)成下面這個樣子：

CSS樣式：

html內(nèi)容：

程序運(yùn)行效果：

1.使用overflow：hidden隱藏溢出

當(dāng)父div擁有固定的高度時，比如height:500px,我們使用overflow:hidden來隱藏溢出。

當(dāng)使用div+css布局時，會出現(xiàn)很多的div嵌套——父div內(nèi)嵌套一個或多個的子div，默認(rèn)情況下，父div的高度是auto——它可以被子div任意的撐大。然而父div也可以有固定的高度(或?qū)挾?，比如height:500px，那么如果子div的高度超過了這個值，在默認(rèn)情況下，子div會超出父div的束縛，這就是溢出。我們可以通過設(shè)置父div的CSS屬性——overflow來對子div進(jìn)行控制。這里使用overflow:hidden來隱藏子元素溢出的部分。

2.使用overflow：hidden清除浮動

當(dāng)父元素的高h(yuǎn)eight:auto時，我們使用overflow：hidden清除浮動

當(dāng)我們?yōu)閐iv1和div2加上一個屬性：float:left后，我們會發(fā)現(xiàn)：背景色為黑色父div消失了，這是因?yàn)椋?浮動的元素脫離文檔元素， 不占據(jù)空間。 不浮動的元素會直接無視掉這個元素：父div無視了自己的兩個孩子，其高度為0（因?yàn)槲覀儧]有設(shè)置父div的高度），所以父div沒有顯現(xiàn)。

想讓父div“寬容的”接受自己的兩個孩子有兩個辦法：

（1） 第一個就是讓父親也浮動起來 ，我們試著給父div添加一個CSS屬性：float:right,會發(fā)現(xiàn)兩個顏色塊出現(xiàn)在了屏幕的右邊，依然沒有父div的身影，然而通過開發(fā)人員工具不難看出父div已經(jīng)包容子div

這是因?yàn)楦拥膁iv已經(jīng)失去了其“獨(dú)霸一行”的能力，我們需要手動為父div設(shè)置一個寬度，比如width:500px，之后可以看到：