float浮動造成父級元素塌陷怎么辦

float浮動造成父級元素塌陷怎么辦？這個問題可能是我們日常學習或工作經常見到的。希望通過這個問題能讓你收獲頗深。下面是小編給大家帶來的參考內容，讓我們一起來看看吧！

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

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

【推薦課程：CSS教程】

當給一個元素的父元素設置了背景顏色之后，再為子元素設置浮動后會發現父元素的背景顏色消失了，并且當父元素有一個邊框時會發現浮動元素無法將邊框撐開。

例：沒有給li設置浮動

 <ul style="background: pink;border: 1px solid #ccc">
  <li>億速云</li>
  <li>億速云</li>
  <li>億速云</li>
  <li>億速云</li>
  </ul>

設置了浮動之后

<ul style="background: pink;border: 1px solid #ccc">
  <li style="float: left;list-style: none;">億速云</li>
  <li style="float: left;list-style: none;">億速云</li>
  <li style="float: left;list-style: none;">億速云</li>
  <li style="float: left;list-style: none;">億速云</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浮動造成父級元素塌陷怎么辦大概了解了嗎？希望文章內容對大家有所幫助。如果想了解更多相關文章內容，歡迎關注億速云行業資訊頻道。