CSS中overflow:hidden如何實(shí)現(xiàn)溢出,坍塌,清除浮動(dòng)

這篇文章主要為大家展示了“CSS中overflow:hidden如何實(shí)現(xiàn)溢出,坍塌,清除浮動(dòng)”，內(nèi)容簡(jiǎn)而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶領(lǐng)大家一起研究并學(xué)習(xí)一下“CSS中overflow:hidden如何實(shí)現(xiàn)溢出,坍塌,清除浮動(dòng)”這篇文章吧。

overflow：hidden是overflow屬性的一個(gè)神奇用法，它可以幫助我們隱藏溢出的元素，清除浮動(dòng)和解除坍塌。當(dāng)某一個(gè)屬性擁有這么多的功能時(shí)，難免使人難以把握，不過(guò)不要怕，只要信：看完這篇文章，我相信你絕對(duì)能對(duì)overflow:hidden的用法熟練掌握。

下面的代碼將作為基本演示代碼，每次講解一個(gè)新的作用，我們都要將代碼恢復(fù)成下面這個(gè)樣子：

CSS樣式：

.container{
      background-color: black;
           }

.div1{
      background-color: aqua;
      width: 100px;
      height: 100px;
      }
.div2{
       background-color: red;
       width: 100px;
       height: 100px;
     }

html內(nèi)容：

<div class="container">
    <div class="div1"></div>
    <div class="div2"></div>
</div>

程序運(yùn)行效果：

1.使用overflow：hidden隱藏溢出

當(dāng)父div擁有固定的高度時(shí)，比如height:500px,我們使用overflow:hidden來(lái)隱藏溢出。

當(dāng)使用div+css布局時(shí)，會(huì)出現(xiàn)很多的div嵌套——父div內(nèi)嵌套一個(gè)或多個(gè)的子div，默認(rèn)情況下，父div的高度是auto——它可以被子div任意的撐大。然而父div也可以有固定的高度(或?qū)挾?，比如height:500px，那么如果子div的高度超過(guò)了這個(gè)值，在默認(rèn)情況下，子div會(huì)超出父div的束縛，這就是溢出。我們可以通過(guò)設(shè)置父div的CSS屬性——overflow來(lái)對(duì)子div進(jìn)行控制。這里使用overflow:hidden來(lái)隱藏子元素溢出的部分。

2.使用overflow：hidden清除浮動(dòng)

當(dāng)父元素的高h(yuǎn)eight:auto時(shí)，我們使用overflow：hidden清除浮動(dòng)

當(dāng)我們?yōu)閐iv1和div2加上一個(gè)屬性：float:left后，我們會(huì)發(fā)現(xiàn)：背景色為黑色父div消失了，這是因?yàn)椋?浮動(dòng)的元素脫離文檔元素， 不占據(jù)空間。 不浮動(dòng)的元素會(huì)直接無(wú)視掉這個(gè)元素：父div無(wú)視了自己的兩個(gè)孩子，其高度為0（因?yàn)槲覀儧](méi)有設(shè)置父div的高度），所以父div沒(méi)有顯現(xiàn)。

想讓父div“寬容的”接受自己的兩個(gè)孩子有兩個(gè)辦法：

（1） 第一個(gè)就是讓父親也浮動(dòng)起來(lái) ，我們?cè)囍o父div添加一個(gè)CSS屬性：float:right,會(huì)發(fā)現(xiàn)兩個(gè)顏色塊出現(xiàn)在了屏幕的右邊，依然沒(méi)有父div的身影，然而通過(guò)開發(fā)人員工具不難看出父div已經(jīng)包容子div

這是因?yàn)楦?dòng)的div已經(jīng)失去了其“獨(dú)霸一行”的能力，我們需要手動(dòng)為父div設(shè)置一個(gè)寬度，比如width:500px，之后可以看到：

（2）第二種就是 為父親添加overflow:hidden屬性用以清除浮動(dòng)

.container{ background-color: black; overflow:hidden;}

這時(shí)的效果如圖所示：

總結(jié)：

（1）（2）一個(gè)使用了都浮動(dòng)的戰(zhàn)略，一個(gè)使用了清除浮動(dòng)的戰(zhàn)略使父div寬容的接受了子div，兩者的 區(qū)別在于都浮動(dòng)需要額外設(shè)定父div的寬度，因?yàn)楦?dòng)起來(lái)的div失去了div獨(dú)占一行的特性，而清除浮動(dòng)的父div仍然霸道。

3.解除坍塌

可以使用overflow:hidden解除margin坍塌，當(dāng)然了，坍塌是不分父div的高度是否固定的

首先要知道什么叫做坍塌：

我們?yōu)閐iv1添加一個(gè)屬性：margin-top:50px,我們想象中效果是這樣的：

但實(shí)際上是這樣的（這是開發(fā)人員工具下的效果）：

CSS中存在一個(gè)margin collapse，即邊界塌陷或者說(shuō)邊界重疊。對(duì)于上下兩個(gè)并列的div塊而言，上面div的margin-bottom和下面div的margin-top會(huì)塌陷，也就是會(huì)取上下兩者margin里最大值作為顯示值，所以從這個(gè)意義上說(shuō)：CSS及瀏覽器的設(shè)計(jì)者們希望我們?cè)诓季謺r(shí)，如果遇到上下兩個(gè)并排內(nèi)容塊的安排，最好只設(shè)置其中每個(gè)塊上或下margin的一處即可。

但對(duì)于父塊DIV內(nèi)含子塊DIV的情況，就會(huì)按另一條CSS慣例來(lái)解釋了，那就是：對(duì)于有塊級(jí)子元素的元素（父元素）計(jì)算高度的方式，如果元素沒(méi)有上下邊框和填充，那其高度就是第一個(gè)子元素頂部和底部邊框邊緣之間的距離。

結(jié)論：

解決父子DIV中頂部margin cllapse的問(wèn)題，需要給父div設(shè)置：

1、邊框，當(dāng)然可以設(shè)置邊框?yàn)橥该?

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

此外，還可以通過(guò)over-flow來(lái)解決

（1）我們可以為父div添加overflow:hidden解決這個(gè)問(wèn)題：

.container{

background-color: black;

overflow: hidden;

}

效果如圖所示：

（2）會(huì)思考的讀者一定會(huì)考慮浮動(dòng)能不能解決這個(gè)煩人的問(wèn)題，這里為了排除overflow:hidden對(duì)未定高度的父div的影響，我們?yōu)楦竏iv設(shè)置一個(gè)高度：

.container{

background-color: black;

height: 200px;

}

我們?yōu)樗凶觗iv添加一個(gè)浮動(dòng)屬性（比如float:left），顯而易見，只要是浮動(dòng)的子div就會(huì)完全避免坍塌的問(wèn)題（PS：無(wú)論父div是否浮動(dòng)）：

可以使用overflow:hidden來(lái)解除坍塌，浮動(dòng)的div根本不用考慮坍塌。

以上是“CSS中overflow:hidden如何實(shí)現(xiàn)溢出,坍塌,清除浮動(dòng)”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道！