深入理解:overflow:hidden——溢出,坍塌,清除浮動
overflow:hidden是overflow屬性的一個神奇用法,它可以幫助我們隱藏溢出的元素,清除浮動和解除坍塌。當某一個屬性擁有這麼多的功能時,難免使人難以把握,不過不要怕,只要信:看完這篇文章,我相信你絕對能對overflow:hidden的用法熟練掌握。
下面的代碼將作爲基本演示代碼,每次講解一個新的作用,我們都要將代碼恢復成下面這個樣子:
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“寬容的”接受自己的兩個孩子有兩個辦法:
(1)第一個就是讓父親也浮動起來,我們試着給父div添加一個CSS屬性:float:right,會發現兩個顏色塊出現在了屏幕的右邊,依然沒有父div的身影,然而通過開發人員工具不難看出父div已經包容子div
這是因爲浮動的div已經失去了其“獨霸一行”的能力,我們需要手動爲父div設置一個寬度,比如width:500px,之後可以看到:
這是因爲浮動的div已經失去了其“獨霸一行”的能力,我們需要手動爲父div設置一個寬度,比如width:500px,之後可以看到
(2)第二種就是爲父親添加overflow:hidden屬性用以清除浮動
總結:
(1)(2)一個使用了都浮動的戰略,一個使用了清除浮動的戰略使父div寬容的接受了子div,兩者的區別在於都浮動需要額外設定父div的寬度,因爲浮動起來的div失去了div獨佔一行的特性,而清除浮動的父div仍然霸道。
3.解除坍塌
可以使用overflow:hidden解除margin坍塌,當然了,坍塌是不分父div的高度是否固定的
首先要知道什麼叫做坍塌:
我們爲div1添加一個屬性:margin-top:50px,我們想象中效果是這樣的:
但實際上是這樣的(這是開發人員工具下的效果):
可以看出,div1的上端距離瀏覽器的頂部有50px而不是對它的父div,更可怕的是它甚至向下頂了它的父div,這就是坍塌。這裏多說一句:這種坍塌只針對於父親的第一個兒子,div2設置margin-top:50px則不會有任何不妥。
(1)我們可以爲父div添加overflow:hidden解決這個問題:
.container{
background-color: black;
overflow: hidden;
}
(2)會思考的讀者一定會考慮浮動能不能解決這個煩人的問題,這裏爲了排除overflow:hidden對未定高度的父div的影響,我們爲父div設置一個高度:
.container{
background-color: black;
height: 200px;
}
我們爲所有子div添加一個浮動屬性(比如float:left),顯而易見,只要是浮動的子div就會完全避免坍塌的問題(PS:無論父div是否浮動)
總結
可以使用overflow:hidden來解除坍塌,浮動的div根本不用考慮坍塌。
4.總結
overflow:hidden的用法在溢出和清除浮動上主要針對父div是否有固定的高度加以區分。它還額外肩負瞭解除坍塌的重任。