前言

　　你在前端寫樣式的時候遇到過需要設定滾動條的時候嗎？或者你知道如何讓父元素下面超出的子元素隱藏起來嗎？那麼本文主要記錄一下前端在寫 css 樣式的時候經常遇到 overflow 屬性的理解以及 overflow：hidden 的詳細使用方法。同時面試時候也經常遇到這樣的問題：談談你對 overflow 的瞭解。

正文

　　1.overflow 屬性詳解

　　首先宣告一下基礎的html程式碼片段和css樣式

     <div class="wrap">
        <div class="item">1</div>
        <div 
 
class="item">2</div>
        <div class="item">3</div>
        <div class="item">4</div>
        <div class="item">5</div>
      </div>

        .wrap{
            width: 200px;
            height: 200px;
            border: 1px solid red;
            overflow
 
: visible;
        }
        .item{
            width: 200%;
            height: 50px;
            border: 1px solid black;
        }

　　（1）overflow：visible ，該屬性的預設值，當父元素寬度或者高度不夠的時候，子元素會呈現在父元素外面。結果如下：

　　（2）overflow：scroll，當父元素寬高不夠時，子元素內容會被裁剪，此時出現滾動條，超出的部分內容通過滾動條顯示。若想要達到隱藏滾動條的效果，可以給父元素設定css屬性：.wrap::webkit-scrollbar{ display : none ; }。

　　（3）overflow：auto，該屬性效果同上，子元素的內容會被裁剪，此時出現滾動條，超出的部分通過滾動條顯示。效果如下：

　　（4）overflow ：hidden，當父元素高度不夠時候，子元素會被裁剪，超出的部分不可見。效果如下：

　　2.overflow：hidden常見用法：

　　（1）隱藏溢位部分，若子元素為文字元素，設定多餘文字隱藏邊顯示 ... 省略符號。

    <div class="wrap1">
      給一個元素中設定overflow:hidden，那麼該元素的內容若超出了給定的寬度和高度屬性，那麼超出的部分將會被隱藏，不佔位。
    </div>
    .wrap1 {
        width: 200px;
        height: 200px;
        border: 1px solid red;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
      }

　　沒有設定overflow，以及後面兩條css屬性情況下文字會換行顯示，設定了之後出現省略符號，效果如下：

　　（2）清除浮動

　　首先理解什麼時浮動？浮動提出的本質是為了解決圖片的文字環繞問題，意思就是設定圖片為浮動元素，文字環繞該圖片展現的問題。float 元素只是脫離了文件流的 dom 空間，但是還佔據著文字空間，使用 float 脫離文件流時，其他盒子無視這個元素，但是其他盒子內的文字依然會為這個元素讓出位置。知道了浮動之後，來了解下接觸浮動。先來看下程式碼和效果：

    <div class="wrap2">
      <div class="wrap2-item1">我是浮動元素item1的內容</div>
      <div class="wrap2-item2">我是第二個元素的內容</div>
    </div>
    <div class="others">我是其他部分</div>
    .wrap2 {
        width: 200px;
        border: 2px solid red;
      }
      .wrap2-item1 {
        float: left;
        clear: both;
        height: 200px;
        width: 50px;
        border: 2px solid black;
      }
      .wrap2-item2 {
        height: 100px;
        width: 100px;
        border: 2px solid green;
      }
      .others {
        width: 200px;
        height: 200px;
        background-color: skyblue;
      }

　　執行結果如圖：

　　通常情況下，我們不會給父元素設定高度，只能由子元素的高度撐開，相當於給父元素設定高度值為auto,入下面的程式碼，此時父元素的高度被wrap2-item2這個盒子的高度撐開。給子元素設定了float ，使得item2元素讓出位置，隱藏了item2的內容顯示在剩餘的位置中，但是此時item的浮動導致影響了其他部分的渲染，要想解決這個問題就需要清除浮動元素對別的其他部分的影響。程式碼中給 warp2 這個父元素新增overflow:hidden即可。結果如下：

　　由於沒有給父元素設定高度，父元素沒有包住item1這個浮動子元素，造成了其他部分頂上去了，產生了高度塌陷問題，設定overflow:hidden之後，清除了item相對於包裹元素的浮動，從而父元素高度隨子元素高度自適應，此時就不會影響到其他部分的盒子了。

　　（3）解決外邊距塌陷問題：

　　程式碼及效果如下，要想使得子盒子設定margin-top 為20px的效果，導致了父元素的上邊距為了20px,沒有實現預期的效果，

    <div class="line"></div>
    <div class="wrap3">
      <div class="wrap3-item">我是子元素內容</div>
    </div>
    .line {
        width: 100%;
        height: 1px;
        margin-top: 10px;
        background-color: black;
      }
      .wrap3 {
        width: 200px;
        background-color: skyblue;
      }
      .wrap3-item {
        margin-top: 20px;
        width: 100px;
        height: 50px;
        background-color: tan;
      }

　　效果如圖：　　　　　　

　　這就是高度塌陷的結果，父元素沒有設定高度，跟隨了子元素的高度，子元素設定上邊距導致父元素出現了上邊距，而子元素沒有效果。要想解決這種高度塌陷的問題常用的辦法如下：1.給父元素設定邊框，2.給父元素設定overflow：hidden即可。兩者選其一即可，最終效果如下：

　　（3）遇到的疑惑如下：

　　上面的問題是為什麼？瀏覽器在渲染數字的時候，如果數字一行放不下的情況，會自動放在下一行，而純文字就沒有這種問題。

總結

　　以上就是本文的全部內容，希望給讀者帶來些許的幫助和進步，方便的話點個關注，小白的成長踩坑之路會持續更新一些工作中常見的問題和技術點。