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

2021-10-23 10:23:04 字數 373 閱讀 9155

子元素可以撐開父元素的高度,但是子元素如果有浮動就不能撐不開父元素的高度(高度塌陷了)。

什麼情況下會出現高度塌陷,子元素浮動,而父元素沒有高度會出現高度塌陷。

解決高度塌陷的方法

方法1:給父元素加overflow:hidden;(觸發了bfc) 缺點:超出的元素會被隱藏。

方法2:給需要清浮動的地方加乙個空標籤

缺點:造成**冗餘

方法3:萬能清除浮動法(給父元素加)

.clearfix:after{

content:""; display:block; visibility:hidden; overflow:hidden; font-size:0;

clear:both; height:0;

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

當父元素未設定高度 時,所有子元素浮動後,造成 子元素脫離文件流進而無法把父元素撐開,父元素高度為0 產生高度塌陷 稱為高度塌陷問題。父元素高度塌陷後,父元素以下的元素都會向上移動,導致布局混亂,所以我們要解決高度塌陷的問題。如下 當我們讓div1和div浮動之後 我們可以發現,當子元素全都浮動後,...

高度塌陷及解決方法

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

高度塌陷解決方法

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