高度塌陷出現的場景及解決方法

2021-10-04 16:58:08 字數 655 閱讀 8553

一、高度塌陷出現的場景:

當子元素有浮動,父元素沒有高度的時候,父元素會出現高度塌陷

注:浮動的子元素不會撐開父元素的 height 或者是 min-height。

二、解決高度塌陷的方法:

1:給出現高度塌陷的元素新增:overflow:hidden;

原理:overflow:hidden;觸發了乙個 bfc(布局邏輯)

bfc規定:計算bfc高度時候,浮動元素也參與計算。

弊端:隱藏掉定位在當前元素外圍的內容。

2:在浮動元素的下方(同級)新增乙個空的div,給div設定樣式

div原理:新增的空div新增了clear:both;忽略上方同級新增浮動的元素留出的空間

。在父元素最底下顯示,撐開父元素高度。

新增clear:both; 當前元素會忽略上方新增浮動的元素 留出來的空間。

(稱為 閉合浮動)

clear的屬性值:

clear:left

clear:right

clear:both

弊端:形成**的冗餘(出現高度塌陷,反覆新增空div)

3:萬能清除法:

.clear_fix::after

.clear_fix

高度塌陷及解決方法

一 什麼是高度塌陷 在文件流中,當父元素沒有設定高度的時候,父元素的高度就取決於子元素的高度,也就是常常說的 由子元素撐開 當子元素設定為浮動,脫離了文件流,這時候就會造成父元素的高度塌陷,因為沒有子元素 撐著它的高度 這樣會導致父元素後面的元素往上移,造成布局混亂。二 解決此問題的方法 1.在後面...

高度塌陷解決方法

如果父元素只包含浮動元素,且父元素未設定高度和寬度,那麼它的高度就會塌縮為零,也就是所謂的 高度塌陷 如果父級元素包含背景或者邊框,那麼溢位的元素就不像父級元素的一部分了。解決 高度塌陷 問題的方法 1.浮動父級元素,父級元素的高度就會擴大,直到完全包含它裡面的浮動元素。如果使用這種方法,一定要在該...

高度塌陷的原因及解決方法

子元素可以撐開父元素的高度,但是子元素如果有浮動就不能撐不開父元素的高度 高度塌陷了 什麼情況下會出現高度塌陷,子元素浮動,而父元素沒有高度會出現高度塌陷。解決高度塌陷的方法 方法1 給父元素加overflow hidden 觸發了bfc 缺點 超出的元素會被隱藏。方法2 給需要清浮動的地方加乙個空...