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

lily000000發表於2017-11-02

深入理解：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…

    相關文章