深刻理解：overflow:hidden——溢出,坍塌,清除浮動

深刻理解：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，以後能夠看到：

（2）第二種就是爲父親添加overflow:hidden屬性用以清除浮動

.container{ background-color: black; 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是否有固定的高度加以區分。它還額外肩負瞭解除坍塌的重任。

轉載地址來自 blog.csdn.net/hukaihe/art…