（一）什么是盒子坍塌（高度坍塌）
本應該在父盒子內部的元素跑到了外部
高度坍塌也就是在文檔流中，父元素的高度默認是被子元素撐開的，也就是子元素多高，父元素就多高。但是當子元素設置浮動之后，子元素會完全脫離文檔流，此時將會導致子元素無法撐起父元素的高度，導致父元素的高度塌陷。
（二）舉個例子

代碼：`

Document 外部盒子 浮動流盒子 浮動流盒子 浮動流盒子 浮動流盒子 浮動流盒子 浮動流盒子 浮動流盒子 浮動流盒子 浮動流盒子 浮動流盒子 `

（三）解決辦法
(1)推薦：在坍塌的盒子也就是父元素下面加個 ::after 偽類

/* .clearfix::after{content: "";display: block;clear: both;} */

效果：

這是一種純CSS的解決浮動造成盒子塌陷方法，沒有引入任何冗余元素，推薦使用此方法來解決CSS盒子塌陷。
（2）可以在浮動流盒子下面加個新的常規流盒子，clear屬性：both也是可以的

總結

以上是生活随笔為你收集整理的CSS盒子坍塌（高度坍塌）（以及解决办法）的全部內容，希望文章能夠幫你解決所遇到的問題。

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