在正常的文檔流中，夫元素的高度是被子元素撐開的

若子元素浮動，脫離文檔流，會導致我們父元素高度丟失，這種情況我們叫高度塌陷

會影響頁面布局，必須要解決

解決方案一：

給父元素設置固定高度，但在實際開發過程中，高度都是被內容撐開

.box1{border: 10px solid red;}.box2{width: 200px; height: 200px; background-color: green; float: left; }.box3{ height: 200px; width: 100%; background-color: yellow;}<div class="box1"><div class="box2"></div></div><div class="box3"></div>

解決方案二：

頁面中元素有隱含的屬性，block formatting context 即塊格式化上下文，簡稱bfc

當開啟了bfc 后，元素會變成一個獨立的布局，會有以下特帶點

1：父元素的垂直外邊距不會和子元素重疊

2：開啟bfc的元素不會被浮動元素所覆蓋

3：開啟bfc的元素可以包含浮動的子元素（可以解決高度塌陷）

.box1{border: 10px solid red;float: left; */display: inline-block; */overflow: hidden;} .box2{width: 200px;height: 200px;background-color: green;float: left;}.box3{height: 200px;width: 100%;background-color: yellow;}

如何開啟bfc

1：設置·元素浮動

? 不推薦，還是會改變頁面的布局，而且父元素的寬度會丟失

2：設置元素inline-block

? ?不推薦，會丟失父元素的高度

3：將元素的overflow設置為一個非visble

? ?可以使用，也會產生一些小的副作用

4：設置元素的絕對定位

.box4{height: 200px;width:200px;background-color:gray;overflow: hidden; } .box5{height: 100px;width: 100px;background-color:red;}.box6{height: 100px;width: 100px;background-color:brown;}

由于受到浮動的影響，.box3，希望清除其他元素浮動對當前元素產生的影響

可以用clear屬性完成

可選值：

nome? 默認值? 不清除浮動

left? 清除左側浮動元素對當前元素的影響

right? 清除右側浮動元素對當前元素的影響

both? 清除兩側浮動元素對當前元素的影響

? ? ? ? ?清除對其他影響最大的那個元素的浮動

clear原理

?設置浮動后，瀏覽器會自動為元素添加上一個外邊距，以示位置不受其他影響

.box1{width: 200px;height: 200px;border: 10px solid red;float: left;} .box2{width: 100px;height: 100px;background-color: green;float:right;} .box3{height:300px;width: 300px;background-color: yellow;clear: both;}<div class="box1"></div> <div class="box2"></div> <div class="box3"></div>

解決方案三

利用clear：both；清除浮動

.box{ clear: both; }

解決方案思：

在父元素后面加一個空的內容

利用clear：both；清除浮動影響

.box1:after{ content: "";clear: both;display: block;}

總結

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

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