在進(jìn)行網(wǎng)頁布局時，時常會用到float浮動屬性，但是當(dāng)父元素下的子元素設(shè)置了浮動就會造成父元素塌陷。接下來我們將在文章中為大家具體介紹如何解決因浮動而造成父元素塌陷的問題，具有一定的參考作用，希望對大家有所幫助

【推薦課程：CSS教程】

當(dāng)給一個元素的父元素設(shè)置了背景顏色之后，再為子元素設(shè)置浮動后會發(fā)現(xiàn)父元素的背景顏色消失了，并且當(dāng)父元素有一個邊框時會發(fā)現(xiàn)浮動元素?zé)o法將邊框撐開。

例：沒有給li設(shè)置浮動

 <ul style="background: pink;border: 1px solid #ccc">
 <li>PHP中文網(wǎng)</li>
 <li>PHP中文網(wǎng)</li>
 <li>PHP中文網(wǎng)</li>
 <li>PHP中文網(wǎng)</li>
 </ul>

效果圖：

設(shè)置了浮動之后

<ul style="background: pink;border: 1px solid #ccc">
 <li style="float: left;list-style: none;">PHP中文網(wǎng)</li>
 <li style="float: left;list-style: none;">PHP中文網(wǎng)</li>
 <li style="float: left;list-style: none;">PHP中文網(wǎng)</li>
 <li style="float: left;list-style: none;">PHP中文網(wǎng)</li>
 </ul>

效果圖

從上圖中可以看出當(dāng)子元素設(shè)置了浮動之后，父元素的內(nèi)容沒有被撐開。也就是說元素設(shè)置浮動后，就不在整個文檔流的管轄范圍，那么它之前存在在父元素內(nèi)的高度就隨著浮動不復(fù)存在了，而此時父元素會默認(rèn)自己里面沒有任何內(nèi)容（前提是未給父元素設(shè)置固定高度，如果父元素本身有固定高度，就不會出現(xiàn)這種情況）就會發(fā)生塌陷

父元素塌陷解決方法：

（1）給父級元素添加一個高度

此方法中高度無法確認(rèn)，需要多次嘗試設(shè)置

<ul style="height:200px;background: pink;border: 1px solid #ccc">

（2）在最后一個子元素后加一個空的div，給他添加樣式clear，清除兩側(cè)浮動；

 <div style="clear:both;"></div>

（3）父級元素設(shè)置overflow：hidden；

 <ul style="background: pink;border: 1px solid #ccc;overflow: hidden;">

（4）父級元素添加after偽類；

.parent:after{
content:"";
display:block;
clear:both;
}

總結(jié)：

聲明：本網(wǎng)頁內(nèi)容旨在傳播知識，若有侵權(quán)等問題請及時與本網(wǎng)聯(lián)系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com