CSS中overflow:hidden如何實現溢出,坍塌,清除浮動-創新互聯

這篇文章主要為大家展示了“CSS中overflow:hidden如何實現溢出,坍塌,清除浮動”，內容簡而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶領大家一起研究并學習一下“CSS中overflow:hidden如何實現溢出,坍塌,清除浮動”這篇文章吧。

創新互聯于2013年成立，是專業互聯網技術服務公司，擁有項目網站設計、成都做網站網站策劃，項目實施與項目整合能力。我們以讓每一個夢想脫穎而出為使命，1280元江安做網站,已為上家服務,為江安各地企業和個人服務,聯系電話:028-86922220

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設置：

1、邊框，當然可以設置邊框為透明;

2、為父DIV添加padding，或者至少添加padding-top;

此外，還可以通過over-flow來解決

（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根本不用考慮坍塌。

以上是“CSS中overflow:hidden如何實現溢出,坍塌,清除浮動”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注創新互聯行業資訊頻道！

網頁名稱：CSS中overflow:hidden如何實現溢出,坍塌,清除浮動-創新互聯
地址分享：http://m.kartarina.com/article8/cdcsip.html

成都網站建設公司_創新互聯，為您提供微信公眾號、網站排名、小程序開發、手機網站建設、軟件開發、網站內鏈

廣告

聲明：本網站發布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創新互聯