在對頁面進行布局時，經常會使用float 或者 position 屬性，會導致子元素脫離文檔流，使父元素高度塌陷的問題。 例如： <div class="box1"><div class="box2"></div> </div> <style> 當box2脫離文檔流之后，會導致box1高度塌陷，在網頁中不會被現實出來，從而布局也會出現混亂。 此時可以對box1開啟屬性，overflow：hidden/auto/scroll; 都可以解決高度塌陷問題，但是auto和scroll都會在頁面顯示特有的樣式，所以在解決簡單的高度塌陷時，可以使用overflow:hidden; 但是overflow：hidden；樣式在布局時有可能也會被使用，這樣就造成沖突問題。 所以此時可以使用clear屬性，當box后面存在一個塊級的兄弟元素時，調用clear:both;屬性，也可以解決高度塌陷問題。 但是，我們并不像在盒模型中在添加多余的盒子，此時可以使用偽類選擇器，在box1的最后面使用偽類選擇器::after定義一個空的塊級盒模型。 <style>.box1::after{content : "";display : block;clear:both;}</style> 此時box1的高度塌陷問題也可以得到完善的解決。 當然為了解決兼容性問題，可以為box1加上一句代碼，使其兼容IE瀏覽器的高度塌陷問題。 .box1{zoom : 1;} 然而，此時還存在一個問題，就是.box1和.box2在上外邊距重疊的時候，無論為哪個元素設置一個上外邊距，都會導致兩個元素同時向下移動。 當然解決這個問題的方法也有很多，可以在父元素和子元素之間添加任意一個非空的標簽或一個字符串還有一個外邊框，都可以使外邊距重疊導致的問題清除，但是我們在布局時不想添加一些無用樣式，此時也可以使用偽類選擇器::before，在.box1的前面添加一個空的字符串，然后將該字符串變為inline-block/block,都可以使該問題去除 .box1::before{content:"";display:inline-block/block;} 所以，將以上代碼綜合起來，既可以解決高度塌陷，又可以解決上邊距重疊問題 .box1::before,.box1::after{content:"";display:block;clear:both;}.box1{zoom:1;}```

總結

以上是生活随笔為你收集整理的关于元素塌陷的问题的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。