float浮動造成父級元素塌陷的解決方法

來源：懂視網責編：小采時間：2020-11-02 22:14:27

float浮動造成父級元素塌陷的解決方法

float浮動造成父級元素塌陷的解決方法:float浮動造成父級元素塌陷的解決方法是：給父元素設置一個高度，在最后的一個子元素后設置一個空div并使用clear清除浮動，父元素設置overflow：hidden，為父元素添加after偽類在進行網頁布局時，時常會用到float浮動屬性，但是當父元素下的子元素設置了浮動

推薦度：

點擊下載本文 文檔為doc格式

導讀float浮動造成父級元素塌陷的解決方法:float浮動造成父級元素塌陷的解決方法是：給父元素設置一個高度，在最后的一個子元素后設置一個空div并使用clear清除浮動，父元素設置overflow：hidden，為父元素添加after偽類在進行網頁布局時，時常會用到float浮動屬性，但是當父元素下的子元素設置了浮動

float浮動造成父級元素塌陷的解決方法是：給父元素設置一個高度，在最后的一個子元素后設置一個空div并使用clear清除浮動，父元素設置overflow：hidden，為父元素添加after偽類

在進行網頁布局時，時常會用到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

float浮動造成父級元素塌陷的解決方法

推薦度：

點擊下載本文 文檔為doc格式

標簽：元素解決方法的解決辦法

熱門焦點

float浮動造成父級元素塌陷的解決方法

float浮動造成父級元素塌陷的解決方法

float浮動造成父級元素塌陷的解決方法

最新推薦

猜你喜歡

熱門推薦