Html中產生塌陷的原因及解決方法

2021-09-01 12:20:36 字數 682 閱讀 4843

產生塌陷的原因:由於沒有給父元素設定寬高,想通過子元素撐開寬高時,子元素又脫離了文件流使得子元素無法撐開文件流

脫離文件流的三種情況:

(1)float:給子元素設定浮動

(2)position:absolute;絕對定位

(3)position:fixed;相對於瀏覽器視窗定位

解決塌陷的問題:

(1)在浮動元素後使用乙個空元素如

,並在css中賦予.clear屬性即可清理浮動。亦可使用

或來進行清理

優點:簡單,**少,瀏覽器相容性好。

缺點:需要新增大量無語義的html元素,**不夠優雅,後期不容易維護

(2)給浮動元素的容器新增overflow:hidden;或overflow:auto;可以清除浮動,另外在 ie6 中還需要觸發 haslayout ,例如為父元素設定容器寬高或設定 zoom:1。在新增overflow屬性後,浮動元素又回到了容器層,把容器高度撐起,達到了清理浮動的效果。

(3)結合 :after 偽元素(注意這不是偽類,而是偽元素,代表乙個元素之後最近的元素)和 iehack ,可以完美相容當前主流的各大瀏覽器,這裡的 iehack 指的是觸發 haslayout。給浮動元素的容器新增乙個clearfix的class,然後給這個class新增乙個:after偽元素實現元素末尾新增乙個看不見的塊元素(block element)清理浮動。

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

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

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

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

回歸分析中產生過擬合的原因

使用一次函式 0 1x theta 0 theta 1x 0 1 x來 時,從圖中可以看出這不是乙個很好的模型,沒有很好的擬合訓練集,導致出現 欠擬合 問題。使用二次函式 0 1x 2x2 theta 0 theta 1x theta 2x 2 0 1 x 2 x2 來擬合資料集,此時的擬合效果很好...