（一）什么是盒子坍塌（高度坍塌）
本應(yīng)該在父盒子內(nèi)部的元素跑到了外部
高度坍塌也就是在文檔流中，父元素的高度默認(rèn)是被子元素?fù)伍_(kāi)的，也就是子元素多高，父元素就多高。但是當(dāng)子元素設(shè)置浮動(dòng)之后，子元素會(huì)完全脫離文檔流，此時(shí)將會(huì)導(dǎo)致子元素?zé)o法撐起父元素的高度，導(dǎo)致父元素的高度塌陷。
（二）舉個(gè)例子

代碼：`

Document 外部盒子 浮動(dòng)流盒子 浮動(dòng)流盒子 浮動(dòng)流盒子 浮動(dòng)流盒子 浮動(dòng)流盒子 浮動(dòng)流盒子 浮動(dòng)流盒子 浮動(dòng)流盒子 浮動(dòng)流盒子 浮動(dòng)流盒子 `

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

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

效果：

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

總結(jié)

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

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。