詳解overflow:hidden的作用(溢出隱藏、清除浮動(dòng)、解決外邊距塌陷)
我要評(píng)論一. overflow:hidden 溢出隱藏
給一個(gè)元素中設(shè)置overflow:hidden，那么該元素的內(nèi)容若超出了給定的寬度和高度屬性，那么超出的部分將會(huì)被隱藏，不占位。
/*css樣式*/
<style type="text/css">
div{ width: 150px; height: 60px; background: skyblue;
overflow: hidden; /*溢出隱藏*/
}
</style>
/*html*/
<div style="">
今天天氣很好！<br>今天天氣很好！<br>
今天天氣很好！<br>今天天氣很好！<br>
</div>
效果如下：
一般情況下，在頁(yè)面中，一般溢出后會(huì)顯示省略號(hào)，比如，當(dāng)一行文本超出固定寬度就隱藏超出的內(nèi)容顯示省略號(hào)。
/*只適用于單行文本*/
div{
width: 150px;
background: skyblue;
overflow: hidden; /*溢出隱藏*/
white-space: nowrap; /*規(guī)定文本不進(jìn)行換行*/
text-overflow: ellipsis; /*當(dāng)對(duì)象內(nèi)文本溢出時(shí)顯示省略標(biāo)記（...）*/
}
效果如下：
二. overflow:hidden 清除浮動(dòng)
一般而言，父級(jí)元素不設(shè)置高度時(shí)，高度由隨內(nèi)容增加自適應(yīng)高度。當(dāng)父級(jí)元素內(nèi)部的子元素全部都設(shè)置浮動(dòng)float之后，子元素會(huì)脫離標(biāo)準(zhǔn)流，不占位，父級(jí)元素檢測(cè)不到子元素的高度，父級(jí)元素高度為0。那么問(wèn)題來(lái)了，如下：
/*css樣式*/
<style type="text/css">
.box{ background:skyblue; }
.kid{ width: 100px;height: 100px; float:left;}
.kid1{ background: yellow; }
.kid2{ background: orange; }
.wrap{ width: 300px; height: 150px; background: blue; color: white; }
</style>
/*html*/
<body>
<div class="box">
<div class="kid kid1">子元素1</div>
<div class="kid kid2">子元素2</div>
</div>
<div class="wrap">其他部分</div>
</body>
如上，由于父級(jí)元素沒(méi)有高度，下面的元素會(huì)頂上去，造成頁(yè)面的塌陷。因此，需要給父級(jí)加個(gè)overflow:hidden屬性，這樣父級(jí)的高度就隨子級(jí)容器及子級(jí)內(nèi)容的高度而自適應(yīng)。如下：
由于在IE比較低版本的瀏覽器中使用overflow：hidden；是不能達(dá)到這樣的效果，因此需要加上 zoom:1;
所以為了讓兼容性更好的話，如果需要使用overflow:hidden來(lái)清除浮動(dòng)，那么最好加上zoom:1;
/*css樣式*/
<style type="text/css">
.box{ background:skyblue;
overflow: hidden; /*清除浮動(dòng)*/
zoom:1;
}
.kid{ width: 100px;height: 100px; float:left;}
.kid1{ background: yellow; }
.kid2{ background: orange; }
.wrap{ width: 300px; height: 150px; background: blue; color: white; }
</style>
/*html*/
<body>
<div class="box">
<div class="kid kid1">子元素1</div>
<div class="kid kid2">子元素2</div>
</div>
<div class="wrap">其他部分</div>
</body>
三. overflow:hidden 解決外邊距塌陷
父級(jí)元素內(nèi)部有子元素，如果給子元素添加margin-top樣式，那么父級(jí)元素也會(huì)跟著下來(lái)，造成外邊距塌陷，如下：
/*css樣式*/
<style type="text/css">
.box{ background:skyblue;}
.kid{ width: 100px;height: 100px; background: yellow; margin-top: 20px}
</style>
/*html*/
<body>
<div class="box">
<div class="kid">子元素1</div>
</div>
</body>
因此，給父級(jí)元素添加overflow:hidden，就可以解決這個(gè)問(wèn)題了。
/*css樣式*/
<style type="text/css">
.box{ background:skyblue;
overflow: hidden; /*解決外邊距塌陷*/
}
.kid{ width: 100px;height: 100px; background: yellow; margin-top: 20px}
</style>
/*html*/
<body>
<div class="box">
<div class="kid">子元素1</div>
</div>
</body>
到此這篇關(guān)于詳解overflow:hidden的作用(溢出隱藏、清除浮動(dòng)、解決外邊距塌陷)的文章就介紹到這了,更多相關(guān)overflow:hidden的作用 內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持腳本之家！
相關(guān)文章
- 這篇文章主要介紹了CSS中如何解決外邊距塌陷問(wèn)題,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)2020-05-11
margin-top塌陷是在CSS的盒子模型中出現(xiàn)的一種現(xiàn)象，本文就介紹了CSS中外邊距塌陷的八種解決方法，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)2023-05-31