我們在進行頁面布局的時候可以發現元素在脫離文檔流后，就會出現高度塌陷問題。
一、什么是高度塌陷？
通過下面的例子了解什么是高度塌陷。
在頁面中設置一個盒子box，其中在嵌套一個子元素小盒子box1。box設置邊框寬度，而高度不去設置（高度會由內容撐開）
但是當我們向盒子里面添加內容的時候<div class="box1">a</div>,就可以發現父元素被撐開了。
在文檔流定位中，父元素的高度默認是被子元素撐開的高度。即子元素的高度就是父元素的高度。
當為父元素中的子元素設置了向左浮動時。比如說為box1設置向左浮動。就會發現子元素的位置沒變，但是父元素box發生了高度坍塌。
得出結論：當為子元素設置浮動的時候，子元素就會完全脫離文檔流，此時將會導致子元素無法撐開父元素，導致父元素的高度塌陷。
當再在父元素之下設置一個盒子box2，為box2設置高度80px和背景顏色。
按理來說正常情況下，按照文檔流排列，會是box的邊框包裹着box1，box2在二者下方，如圖一所示。
為box1設置浮動定位后，box1會脫離文檔流，如上所示父元素隨即會出現高度塌。這時候，box2盒子也會向上移動，造成布局混亂。如圖二所示。
高度塌陷所造成的后果：由於父元素的高度塌陷，就會導致父元素之下的所有元素都會因此而向上移動，這樣會導致頁面混亂。不利於頁面布局。
解決高度坍塌問題：
方案一：直接為父元素指定高度，假設子元素是200px，那么就為父元素的高度也設置為200px；以避免塌陷問題的出現。
缺點：一旦指定父元素的高度為一個固定值。父元素的高度不會自動適應子元素的高度，所以這種解決方法不推薦使用。