在進行網頁布局時，時常會用到float浮動屬性，但是當父元素下的子元素設置了浮動就會造成父元素塌陷。接下來我們將在文章中為大家具體介紹如何解決因浮動而造成父元素塌陷的問題，具有一定的參考作用，希望對大家有所幫助
【推薦課程：CSS教程】
當給一個元素的父元素設置了背景顏色之后，再為子元素設置浮動后會發現父元素的背景顏色消失了，并且當父元素有一個邊框時會發現浮動元素無法將邊框撐開。
例：沒有給li設置浮動
<ul style="background: pink;border: 1px solid #ccc"> <li>PHP中文網</li> <li>PHP中文網</li> <li>PHP中文網</li> <li>PHP中文網</li> </ul>
效果圖：
設置了浮動之后
<ul style="background: pink;border: 1px solid #ccc"> <li style="float: left;list-style: none;">PHP中文網</li> <li style="float: left;list-style: none;">PHP中文網</li> <li style="float: left;list-style: none;">PHP中文網</li> <li style="float: left;list-style: none;">PHP中文網</li> </ul>
效果圖
從上圖中可以看出當子元素設置了浮動之后，父元素的內容沒有被撐開。也就是說元素設置浮動后，就不在整個文檔流的管轄范圍，那么它之前存在在父元素內的高度就隨著浮動不復存在了，而此時父元素會默認自己里面沒有任何內容（前提是未給父元素設置固定高度，如果父元素本身有固定高度，就不會出現這種情況）就會發生塌陷
父元素塌陷解決方法：
（1）給父級元素添加一個高度
此方法中高度無法確認，需要多次嘗試設置
<ul style="height:200px;background: pink;border: 1px solid #ccc">
（2）在最后一個子元素后加一個空的div，給他添加樣式clear，清除兩側浮動；
<div style="clear:both;"></div>
（3）父級元素設置overflow：hidden；
<ul style="background: pink;border: 1px solid #ccc;overflow: hidden;">
（4）父級元素添加after偽類；
.parent:after{
content:"";
display:block;
clear:both;
}總結：
聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com
Copyright ? 2019-2025 51dongshi.com 版權所有
違法及侵權請聯系：TEL:177 7030 7066 E-MAIL:11247931@qq.com 本站由北京市萬商天勤律師事務所王興未律師提供法律服務
