高度塌陷的產生條件和解決方法

高度塌陷的產生條件和解決方法

高度塌陷一般由浮動或者絕對或固定定位引起，定位引起的高度塌陷可以更換定位，這裏就不再累述了，這裏介紹下浮動引起的高度塌陷及解決辦法。
浮動除了會讓元素水平排列外，還會讓元素脫離文檔，讓下面的元素頂上去，文字會環繞顯示，這就是高度塌陷。

.box{border: 5px solid black;}
.box1,.box2,.box3{float: left;}

![在這裏插入圖片描述](https://img-blog.csdnimg.cn/20200227001001165.png
可以看到，如果父元素不設置高度父元素便會塌陷。下面介紹解決方法

方法一：給父元素設置高度；

.box{border: 5px solid black;height: 150px;}

問題解決。
優點：簡單直接
缺點：高度不能隨內容的高度進行自適應。

方法二：給父元素加overflow：hidden；zoom：1；

.box{border: 5px solid black;overflow: hidden;zoom: 1;}

overflow：hidden；會觸發父元素爲BFC；BFC中規定計算bfc高度時浮動元素參與計算；zoom：1是爲了解決overflow：hidden在IE7及以下的兼容問題；
優點：簡單且高度隨內容自適用；
缺點：容易和定位發生衝突；

方法三：給所有浮動元素的最後添加一個空標籤，添加聲明clear：both；height：0；overflow：hidden；

<div class="box">
	<div class="box1"></div>
	<div class="box2"></div>
	<div class="box3"></div>
	<div class="clear"></div>
</div>
<div class="under">我是下面的元素</div>

.clear{overflow: hidden;height: 0;clear: both;}

clear:both；目的是清除浮動；
overflow：hidden；height：0；是解決部分容器在IE低版本上有默認高度的問題；
優點：比較方便，高度也隨內容自適應，也不會發生內容溢出隱藏
缺點：會造成大量冗餘代碼；

方法四：利用僞元素選擇器解決高度塌陷；

.box::after{content: "";clear:both;display: block;height: 0;overflow:hidden;visibility: hidden;}

利用：after僞類選擇器清除浮動時候，基本語法爲
塌陷元素：after{content: “”;clear:both;display: block;}
聲明 height: 0;overflow:hidden;爲了避免IE兼容問題；
聲明visibility: hidden;是隱藏content引號內的內容；
這種清除高度塌陷的方法又叫萬能清楚法，通常頁面開發的時候，會創建一個公共類，方便產生高度塌陷的元素進行調用；
優點：都是優點
缺點：沒有缺點

其他不常用方法：

原理都是觸發父元素爲BFC，和方法二相同；
1.給父元素添加浮動：會產生新的高度塌陷問題；
2.給父元素添加display：table；會影響自身功能；
3.overflow：auto/scroll；前者內容溢出會出現滾動條，後者直接出現滾動欄；