高度塌陷問題

2022-08-29 23:15:19 字數 505 閱讀 7226

高度塌陷問題

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

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

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

1.浮動父級元素,父級元素的高度就會擴大,直到完全包含它裡面的浮動元素。如果使用這種方法,一定要在該元素的

下個元素新增clear:both,確保浮動元素落到父級元素的下方。

2.使用overflow:hidden,zoom:1 。overflow:hidden屬性會強制父級元素擴大到包含浮動元素,zoom:1只是觸發ie6

的haslayout模式,不會對其他瀏覽器產生影響。

3.使用:after偽類清除,不會影響其他任何樣式,通用性強。

.clearfix

.clearfix:after

解決高度塌陷問題

在文件流中,父元素的高度預設是被子元素撐開的 當為子元素設定浮動後,子元素會完全脫離文件流 此時會導致子元素無法撐起父元素的高度,導致父元素的高度塌陷 由於父元素的高度塌陷了,則父元素下的所有元素都會向上移動,導致頁面布局混亂 所以在開發中需要避免出現高度塌陷的問題 如何開啟元素的bfc 1.設定元...

css高度塌陷問題

首先什麼是高度塌陷?當我們需要給頁面設定自適應寬高的時候,在文件流中,父元素的高度預設的情況下是被子元素的高度撐開的,子元素的高度就是父元素的高度,當我們給子元素設定了浮動厚,子元素就會脫離文件流 當你第一次給父元素設定自適應的時候,又給子元素設定浮動元素的時候,你就會發現,父元素的高度沒有了,這就...

解決高度塌陷問題

所謂高度塌陷就是在文件流中,父元素的高度預設是被子元素撐開的,也就是子元素多高,父元素就多高。但是當為子元素設定浮動以後,子元素會完全脫離文件流,此時將會導致子元素無法撐起父元素的高度,導致父元素的高度塌陷。由於父元素的高度塌陷了,則父元素下的所有元素都會向上移動,這樣將會導致頁面布局混亂。例如 c...