淺談CSS 高度塌陷問題
我要評(píng)論表現(xiàn)
例如：
HTML：
<div class="first">
<div class="first-child1">first-child1</div>
<div class="first-child2">first-child2</div>
</div>
<div class="second">
second
</div>
<div class="third">
third
</div>
CSS：
.first{
width: 300px;
background-color: pink;
}
.first .first-child1,.first .first-child2{
float: left;
width: 100px;
height: 100px;
}
.first .first-child1{
background-color: purple;
margin-right: 10px;
}
.first .first-child2{
background-color: red;
}
.second{
width: 200px;
height: 150px;
background-color: blue;
}
.third{
width: 100px;
height: 150px;
background-color: green;
}
表現(xiàn)為：
產(chǎn)生的原因
由上面的例子可以看出，first盒子沒有設(shè)置高度，由子元素?fù)伍_，但是由于子盒子設(shè)置了浮動(dòng)，脫離了標(biāo)準(zhǔn)流，所以導(dǎo)致first盒子沒有高度，表現(xiàn)為second和third盒子向上移動(dòng)了。
可以得出產(chǎn)生高度塌陷的原因：
在文檔流中，父元素的高度默認(rèn)是被子元素?fù)伍_的，也就是子元素多高，父元素就多高。但是當(dāng)為子元素設(shè)置浮動(dòng)以后，子元素會(huì)完全脫離文檔流，此時(shí)將會(huì)導(dǎo)致子元素?zé)o法撐起父元素的高度，導(dǎo)致父元素的高度塌陷。由于父元素的高度塌陷了，則父元素下的所有元素都會(huì)向上移動(dòng)，這樣將會(huì)導(dǎo)致頁面布局混亂。
高度塌陷的解決辦法：
1、給父元素設(shè)置固定高度。但是使用這種方式后，父元素的高度就不能根據(jù)子元素自動(dòng)撐高了，可以根據(jù)自己頁面的特點(diǎn)，如果可以固定高度，可以使用這種方式，否則，不推薦這種方式。
2、額外標(biāo)簽法，這是w3c推薦的解決方案，但是不推薦，因?yàn)閔tml的原則是寫出語義化的標(biāo)簽，這種方式會(huì)額外增加無意義的標(biāo)簽。
<div class="first">
<div class="first-child1">first-child1</div>
<div class="first-child2">first-child2</div>
<div style="clear: both;"></div>
</div>
3、父元素的overflow屬性（開啟元素的BFC）：
.clearfix{
overflow: hidden;
}
使用這種方式，屬性值可以是非visible（hidden/auto/scroll）中任意，但是建議用hidden。
這種方式副作用較小，這種方式在ie6中不支持，可以外加zoom: 1;
.clearfix::after{
content: "";/*偽元素內(nèi)容為空*/
display: block;/*非默認(rèn)的就行，也可以是table等等*/
height: 0;/*偽元素高度為0，不影響其他元素*/
clear: both;/*清除浮動(dòng)*/
visibility: hidden;/*不可見*/
}
.clearfix{
zoom: 1;/*ie6元素沒有BFC模式，但是這句代碼會(huì)開啟ie6中的hasLayout模式，只在ie中支持*/
}
4、單偽元素after清除浮動(dòng)（開啟元素的BFC）：
.clearfix::after{
content: "";/*偽元素內(nèi)容為空*/
display: block;/*非默認(rèn)的就行，也可以是table等等*/
height: 0;/*偽元素高度為0，不影響其他元素*/
clear: both;/*清除浮動(dòng)*/
visibility: hidden;/*不可見*/
}
.clearfix{
zoom: 1;/*ie6元素沒有BFC模式，但是這句代碼會(huì)開啟ie6中的hasLayout模式，只在ie中支持*/
}
這種方式現(xiàn)在使用比較廣泛，很多大網(wǎng)站都是使用這種方式，副作用較小，只需要在配合處理ie6就可以了。
5、雙偽元素清除浮動(dòng)（開啟元素的BFC）：
.clearfix::before,.clearfix::after{
content: "";
display: block;
clear: both;
}
.clearfix{
zoom: 1;/*ie6元素沒有BFC模式，但是這句代碼會(huì)開啟ie6中的hasLayout模式，只在ie中支持*/
}
這種做法寫法比較麻煩，也不推薦。
清除浮動(dòng)對(duì)父元素的影響后的效果：
BFC相關(guān)
根據(jù)W3C的標(biāo)準(zhǔn)，在頁面中元素都一個(gè)隱含的屬性叫做Block Formatting Context，簡(jiǎn)稱BFC，該屬性可以設(shè)置打開或者關(guān)閉，默認(rèn)是關(guān)閉的。
當(dāng)開啟元素的BFC以后，元素將會(huì)具有如下的特性：
1.父元素的垂直外邊距不會(huì)和子元素重疊
2.開啟BFC的元素不會(huì)被浮動(dòng)元素所覆蓋
3.開啟BFC的元素可以包含浮動(dòng)的子元素
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
淺談CSS中浮動(dòng)float帶來的高度塌陷問題及4種解決方案
本文主要介紹了CSS中浮動(dòng)float帶來的高度塌陷問題及4種解決方案，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小2022-04-14
這篇文章主要介紹了css高度塌陷問題的解決方案，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)2020-03-24
本文主要介紹了CSS浮動(dòng)引起的高度塌陷問題，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-07-27
