css 高度塌陷的解決辦法

一、爲什麼會出現高度塌陷

父元素高度自適應，子元素浮動，只要子元素脫離了文檔流後，造成父元素高度爲0，稱爲高度塌陷問題。那麼爲什麼會出先高度塌陷問題呢？

二、解決高度塌陷

2.1 給父元素一個固定的高度

最簡單粗暴的解決方式就是給父容器一個固定的高度。
推薦指數：☆

缺點：
給父元素固定高度，就不能進行高度自適應，不夠靈活，不推薦使用

css代碼：

<div class='parent'>
	<div class='child'></div>
</div>

.child{
	float:left;
}
.parent{
	height:100px;
}

2.2 父元素也浮動

推薦指數：☆

缺點： 雖然可以撐開父元素，但是會導致父元素的寬度丟失，而且會導致下邊的元素上移,使得跟父元素相鄰的元素的佈局受到影響。

css代碼：

<div class='parent'>
	<div class='child'></div>
</div>
 
.child{
	float:left;
}
.parent{
	float:left;
}

2.3 給父元素添加屬性 overflow: hidden;zoom:1;

推薦指數：☆ ☆

優點： 瀏覽器支持好，簡單；
缺點： 要是子元素要margin負值定位或是負的絕對定位，會被裁掉，所以此方法是有不小的侷限性的。

css代碼：

<div class='parent'>
	<div class='child'></div>
</div>
 
.child{
	float:left;
}
.parent{
	overflow:hidden;
	zoom:1;
}

2.4 在浮動元素後添加一個div

推薦指數：☆ ☆ ☆

優點： 代碼量少 容易掌握 簡單易懂
缺點： 添加了無意義標籤，不易於後期維護，違背了結構和表現分離的標準

css代碼：

<div class='parent'>
	<div class='child'></div>
	<div class='clearBox'></div>
</div>
 
.child{
	float:left;
}
.clearBox{
	clear:both;
}

2.5 萬能清除浮動法

在父元素中內容的最後添加一個僞元素來實現第三種方案的功能
推薦指數：☆ ☆ ☆ ☆ ☆

優點： 不會造成代碼冗餘,不破壞文檔結構，剩餘代碼性能優化，推薦使用。
缺點： 代碼量多

<div class='parent'>
	<div class='child'></div> 
</div>
 
.child{
	float:left;
}
.parent:after{
    content: "";
    height: 0;
    clear: both;
    overflow: hidden;
    display: block;
    visibility: hidden;
}