如何解決高度塌陷

　　hello 朋友們，我又來了哦！對的沒錯，今天的話題呢就是高度塌陷。

　　首先要知道什么是高度塌陷。高度塌陷其實就是指當父元素沒有給確定的高度（即父元素高度靠子元素撐起來），並且子元素添加了浮動時，內容無法撐起父元素的高度，即父元素發生高度塌陷。

　　解決辦法：

　　　　第一種，開啟元素的BFC，元素將會具有如下的特性：
　　　　　　　　　　1.父元素的垂直外邊距不會和子元素重疊
　　　　　　　　　　2.開啟BFC的元素不會被浮動元素所覆蓋
　　　　　　　　　　3.開啟BFC的元素可以包含浮動的子元素

開啟元素BFC屬性的方式：

　一、給父元素添加聲明，清除浮動   overflow：hidden；
　　但這種方式會父元素的寬度丟失，而且使用這種方式也會導致下邊的元素上移，會造成其他的結構問題所以一般不建議采用。

　二、設置元素定位
 
　三、設置元素為 display：inline-block；也可以解決問題，但是會導致寬度丟失，也不推薦使用這種方式
　

　　　　第二種，在浮動的子元素后面添加一個空的 div，並給該這個 div 元素加樣式：

23              *     由於這個div並沒有浮動，所以他是可以撐開父元素的高度的，
24              *     然后在對其進行清除浮動，這樣可以通過這個空白的div來撐開父元素的高度，
25              *     基本沒有副作用

　　　　　　.boxWrap .con{
　　　　　　　　　　clear: both;　height: 0; overflow: hidden;

　　　　　　　　}

 

　　　　　　<div class="boxWrap">

　　　　　　　　　　<p></p>

　　　　　　　　　　<p></p>

　　　　　　　　　　<p></p>

　　　　　　　　　　<p></p>

　　　　　　　　　　<div class="con"></div>

　　　　　　</div>

　　　　第三種，萬能清除浮動法：

　　　　　　.boxWrap:after{

　　　　　　　　　　　　content:".";

　　　　　　　　　　　　display: block;

　　　　　　　　　　　　clear: both;

　　　　　　　　　　　　height: 0;

　　　　　　　　　　　　overflow: hidden;

　　　　　　　　　　　　visibility: hidden;

　　　　　　　　}

 

　　　　　　<div class="boxWrap">

　　　　　　　　　　<p></p>

　　　　　　　　　　<p></p>

　　　　　　　　　　<p></p>

　　　　　　　　　　<p></p>

　　　　　　</div>

 

　　這個方法是目前最好的解決方法，解決問題的同時，也不會帶來新的問題，更不會擾亂父元素的結構與樣式，因此是最推薦使用的一種方法。

 

 OK，到這里，解決高度塌陷的方法已經介紹完了，如果你還有其他好的方法的話，歡迎一起來交流哦！