CSS深刻理解：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 ，咱們想象中效果是這樣的：

但其實是這樣的（這是開發人員工具下的效果）：

CSS中存在一個margin collapse，即邊界塌陷或者說邊界重疊。對於上下兩個並列的div塊而言，上面 div 的 margin-bottom 和下面 div 的 margin-top 會塌陷，也就是會取上下二者margin裏最大值做爲顯示值，因此從這個意義上說：CSS及瀏覽器的設計者們但願咱們在佈局時，若是遇到上下兩個並排內容塊的安排，最好只設置其中每一個塊上或下 margin 的一處便可。

但對於父塊DIV內含子塊DIV的狀況，就會按另外一條CSS慣例來解釋了，那就是：對於有塊級子元素的元素（父元素）計算高度的方式，若是元素沒有上下邊框和填充，那其高度就是第一個子元素頂部和底部邊框邊緣之間的距離。

結論：

解決父子DIV中頂部margin cllapse的問題，須要給父 div 設置：

一、邊框，固然能夠設置邊框爲透明;

二、爲父DIV添加 padding，或者至少添加padding-top;

此外，還能夠經過 overflow 來解決

（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是否有固定的高度加以區分。它還額外肩負瞭解除坍塌的重任。