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;
}

總結：以上就是這篇文章的全部內容了，希望對大家有幫助。

以上是float浮動造成父級元素塌陷的解決方法的詳細內容。更多資訊請關注PHP中文網其他相關文章！