什麼是css的高度塌陷

在文件流程中，父元素的高度預設是被子元素撐開的，也就是子元素多高，父元素就多高。但是當子元素設定浮動之後，子元素會完全脫離文檔流，此時將會導致子元素無法撐起父元素的高度，導致父元素的高度塌陷。

本教學操作環境：windows7系統、CSS3版、Dell G3電腦。

如果父元素只包含浮動元素，且父元素未設定高度和寬度，那麼它的高度就會塌縮為零，也就是所謂的「高度塌陷」。

如果父級元素包含背景或邊框，那麼溢出的元素就不像父級元素的一部分了。

解決「高度塌陷」問題的方法：

# 一：給父元素一個固定的高度

缺點：給父元素固定高度違反了高度自適應的原則，不夠靈活，不建議使用。

方案二：為父元素新增屬性overflow: hidden;

優點：瀏覽器支援好，簡單;

缺點：當子元素有定位屬性時，設定overflow: hidden; 容器以外的部分會被裁切掉。

【推薦教學：CSS影片教學 】

方案三：在子元素的最後加上一個空的p ，並設定下方樣式

div{
clear: both;
height: 0;
overflow: hidden;
}

優點：所有瀏覽器都支持，而且容器溢位不會被裁剪；
缺點：在頁面中加入無意義的div，容易造成程式碼冗餘。

方案四：萬能清除浮動法

在父元素中內容的最後加上一個偽元素來實現第三種方案的功能，具體設定樣式如下：

父元素:

after{
content: "";
height: 0;
    clear: both;
display: block;
}

 優點：不會造成程式碼冗餘，剩餘程式碼效能最佳化，建議使用。

更多程式相關知識，請造訪：程式設計影片！ ！

以上是什麼是css的高度塌陷的詳細內容。更多資訊請關注PHP中文網其他相關文章！