這篇“css中父元素高度塌陷怎么解決”文章的知識(shí)點(diǎn)大部分人都不太理解，所以小編給大家總結(jié)了以下內(nèi)容，內(nèi)容詳細(xì)，步驟清晰，具有一定的借鑒價(jià)值，希望大家閱讀完這篇文章能有所收獲，下面我們一起來(lái)看看這篇“css中父元素高度塌陷怎么解決”文章吧。

成都創(chuàng)新互聯(lián)是一家集網(wǎng)站建設(shè),武寧企業(yè)網(wǎng)站建設(shè),武寧品牌網(wǎng)站建設(shè),網(wǎng)站定制,武寧網(wǎng)站建設(shè)報(bào)價(jià),網(wǎng)絡(luò)營(yíng)銷(xiāo),網(wǎng)絡(luò)優(yōu)化,武寧網(wǎng)站推廣為一體的創(chuàng)新建站企業(yè)，幫助傳統(tǒng)企業(yè)提升企業(yè)形象加強(qiáng)企業(yè)競(jìng)爭(zhēng)力?？沙浞譂M(mǎn)足這一群體相比中小企業(yè)更為豐富、高端、多元的互聯(lián)網(wǎng)需求。同時(shí)我們時(shí)刻保持專(zhuān)業(yè)、時(shí)尚、前沿，時(shí)刻以成就客戶(hù)成長(zhǎng)自我，堅(jiān)持不斷學(xué)習(xí)、思考、沉淀、凈化自己，讓我們?yōu)楦嗟钠髽I(yè)打造出實(shí)用型網(wǎng)站。

首先得回答什么是父元素高度塌陷：

在文檔流中，父元素的高度默認(rèn)是被子元素?fù)伍_(kāi)的，也就是子元素多高，父元素就多高。但是當(dāng)子元素設(shè)置浮動(dòng)之后，子元素會(huì)完全脫離文檔流，此時(shí)將會(huì)導(dǎo)致子元素?zé)o法撐起父元素的高度，導(dǎo)致父元素的高度塌陷。

一下是舉例說(shuō)明:

<pclass="box1">

<pclass="box2"></p>

</p>

<styletype="text/css">

.box1{

border:10pxredsolid;

}

.box2{

background-color:yellow;

width:100px;

height:100px;

float:left;

}

</style>

清除浮動(dòng)詳解

清除浮動(dòng)主要是為了解決由于浮動(dòng)元素脫離文流導(dǎo)致的元素重疊或者父元素高度坍塌的問(wèn)題，而這兩個(gè)問(wèn)題分別對(duì)應(yīng)了需要清除浮動(dòng)的兩種種情況：清除前面兄弟元素浮動(dòng)和閉合子元素浮動(dòng)（解決父元素高度坍塌）。

清除前面兄弟元素浮動(dòng)

清除前面兄弟元素浮動(dòng)很簡(jiǎn)單，只需要在不想受到浮動(dòng)元素影響的元素上使用clear:both即可，HTML&CSS代碼如下：

<pclass="fl">我是左浮動(dòng)元素</p>

<pclass="fr">我是右浮動(dòng)元素</p>

<pclass="cb">我不受浮動(dòng)元素的影響</p>

.fl{

float:left;

}

.fr{

float:right;

}

.cb{

clear:both;

}

在CSS2以前，clear的原理為自動(dòng)增加元素的上外邊距（margin-top）值，使之最后落在浮動(dòng)元素的下面。在CSS2.1中引入了一個(gè)清除區(qū)域（clearance）&mdash;&mdash;在元素上外邊距之上增加的額外間距，使之最后落在浮動(dòng)元素的下面。所以如果需要設(shè)置浮動(dòng)元素與clear元素的間距，得設(shè)置浮動(dòng)的元素的margin-bottom，而不是clear元素的margin-top。

demo可見(jiàn)：clear清除浮動(dòng)

閉合子元素浮動(dòng)

我們知道，在計(jì)算頁(yè)面排版的時(shí)候，如果沒(méi)有設(shè)置父元素的高度，那么該父元素的高度是由他的子元素高度撐開(kāi)的。但是如果子元素是設(shè)置了浮動(dòng)，脫離了文檔流，那么父元素計(jì)算高度的時(shí)候就會(huì)忽略該子元素，甚至當(dāng)所有子元素都是浮動(dòng)的時(shí)候，就會(huì)出現(xiàn)父元素高度為0的情況，這就是所謂的父元素高度坍塌問(wèn)題。為了能讓父元素正確包裹子元素的高度，不發(fā)生坍塌，我們需要閉合子元素的浮動(dòng)。

一般我們有兩種辦法可以用來(lái)閉合子元素浮動(dòng)：

給最后一個(gè)元素設(shè)置clear:both

給父元素新建一個(gè)BFC(塊格式化上下文)

clear:both

由于我們最后一個(gè)元素使用clear:both，所以該元素就能不受浮動(dòng)元素影響出現(xiàn)在父元素的最底部，而父元素計(jì)算高度的時(shí)候需要考慮到這個(gè)正常元素的位置，所以高度自然包裹到了最底部，也就沒(méi)有了坍塌。

對(duì)于這個(gè)方法，以前我們是利用新增一個(gè)空元素（<b>或<span>或<p>等）來(lái)實(shí)現(xiàn)的，如下：

<pclass="container">

<pclass="box"></p>

<spanclass="clear-box"></span>

</p>

.box{

float:left;

}

.clear-box{

clear:both;

}

雖然這種辦法比較直觀，但是不是很優(yōu)雅，因?yàn)樵黾恿艘粋€(gè)無(wú)用的空白標(biāo)簽，比較冗余而且不方便后期維護(hù)（一般不太建議使用該辦法）。所以后期有了通過(guò)父元素的偽元素（::after）實(shí)現(xiàn)的著名clearfix方法，代碼如下：

<pclass="containerclearfix">

<pclass="box"></p>

</p>

.clearfix::after{

content:"";

display:table;

clear:both;

}

上面方法給父元素增加一個(gè)專(zhuān)門(mén)用于處理閉合子元素浮動(dòng)的clearfix類(lèi)名，該類(lèi)使用::after偽元素類(lèi)選擇器增加一個(gè)內(nèi)容為空的結(jié)構(gòu)來(lái)清除浮動(dòng)，可能你們比較疑惑的是為什么要設(shè)置display:table屬性，這其實(shí)涉及到一個(gè)比較復(fù)雜的進(jìn)化過(guò)程，具體可以參考資料&mdash;&mdash;clearfix浮動(dòng)進(jìn)化史

新建BFC

該方法的原理是：父元素在新建一個(gè)BFC時(shí)，其高度計(jì)算時(shí)會(huì)把浮動(dòng)子元素的包進(jìn)來(lái)。

以上就是關(guān)于“css中父元素高度塌陷怎么解決”這篇文章的內(nèi)容，相信大家都有了一定的了解，希望小編分享的內(nèi)容對(duì)大家有幫助，若想了解更多相關(guān)的知識(shí)內(nèi)容，請(qǐng)關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。

分享文章：css中父元素高度塌陷怎么解決
標(biāo)題網(wǎng)址：http://chinadenli.net/article34/jsicse.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供服務(wù)器托管、外貿(mào)建站、云服務(wù)器、網(wǎng)站排名、網(wǎng)站維護(hù)、軟件開(kāi)發(fā)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶(hù)投稿、用戶(hù)轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話(huà)：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)