這篇文章將為大家詳細(xì)講解有關(guān)使用CSS解決浮動(dòng)元素父元素高度塌陷問(wèn)題，小編覺(jué)得挺實(shí)用的，因此分享給大家做個(gè)參考，希望大家閱讀完這篇文章后可以有所收獲。

創(chuàng)新互聯(lián)成立與2013年，先為東源等服務(wù)建站，東源等地企業(yè)，進(jìn)行企業(yè)商務(wù)咨詢(xún)服務(wù)。為東源企業(yè)網(wǎng)站制作PC+手機(jī)+微官網(wǎng)三網(wǎng)同步一站式服務(wù)解決您的所有建站問(wèn)題。

 眾所周知，像div，段落，文本等HTML元素會(huì)逐漸適應(yīng)他們子元素的內(nèi)容。但如果這些元素的子元素設(shè)置浮動(dòng)，例：向右或向左漂浮，那么這些元素可能會(huì)崩潰，出現(xiàn)高度塌陷問(wèn)題（如下示例）。

什么是浮動(dòng)元素父級(jí)的高度塌陷問(wèn)題？

下面通過(guò)簡(jiǎn)單代碼示例來(lái)了解浮動(dòng)元素父級(jí)的高度塌陷問(wèn)題。

html代碼：

<div class="demo">
    <div>HTML5</div>  
    <div>CSS3</div> 
    <div>JavaScript</div> 
    <div>PHP</div> 
    <div>Python</div> 
    <div>MySQL</div>  
</div>

CSS代碼：

.demo{
    background-color: #e28a71;
    padding: 5px;  
    font-size: 20px;
}
.demo *{ 
    padding: 5px;    
}

父元素.demo沒(méi)有設(shè)置高度，當(dāng)沒(méi)有給子元素設(shè)置浮動(dòng)時(shí)，父元素的高度會(huì)被子元素?fù)伍_(kāi)。效果圖：

當(dāng)給子元素設(shè)置了浮動(dòng)后：

.demo *{ 
    padding: 5px;    
    float: left;
}

父元素就會(huì)出現(xiàn)高度塌陷問(wèn)題，效果圖：

如何解決父元素的高度塌陷問(wèn)題？

有許多方法解決浮動(dòng)元素父級(jí)的高度塌陷問(wèn)題，下面我們就來(lái)介紹幾種方法。

方法一：明確指定高度

.demo{
    height: 36px;
    background-color: #e28a71;
    padding: 5px;  
    font-size: 20px;
}

方法二：使用overflow屬性

我們可以使用CSS的overflow屬性來(lái)防止父元素的崩潰。在父元素中將overflow屬性的值設(shè)置為“auto”，就可以解決父元素的高度塌陷問(wèn)題。例：

.demo{
    background-color: #e28a71;
    padding: 5px;  
    font-size: 20px;
    verflow: auto
}

效果圖：

方法三：根據(jù)子元素使父元素浮動(dòng)

這有助于防止父元素崩潰，但缺點(diǎn)是你必須讓所有的父元素浮動(dòng)，即當(dāng)前受影響的父元素，當(dāng)前受影響的父元素的父元素等等。

.demo{
    background-color: #e28a71;
    padding: 5px;  
    font-size: 20px;
    float: left；
}

方法四：使用display屬性和clear屬性

.demo{
    background-color: #e28a71;
    padding: 5px;  
    font-size: 20px;
    display: table; 
    clear: both;
}

關(guān)于使用CSS解決浮動(dòng)元素父元素高度塌陷問(wèn)題就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，可以學(xué)到更多知識(shí)。如果覺(jué)得文章不錯(cuò)，可以把它分享出去讓更多的人看到。

當(dāng)前名稱(chēng)：使用CSS解決浮動(dòng)元素父元素高度塌陷問(wèn)題
本文鏈接：http://www.rwnh.cn/article44/ghsohe.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供動(dòng)態(tài)網(wǎng)站、網(wǎng)站改版、品牌網(wǎng)站建設(shè)、網(wǎng)站設(shè)計(jì)公司、定制開(kāi)發(fā)、網(wǎng)站導(dǎo)航

廣告

聲明：本網(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)