很多時候子元素浮動的，會造成父元素塌陷

解決方法

1.添加一個空元素，並設置成清除浮動，即：

<div style="clear:both;"></div>

優點：通俗易懂，易於掌握

缺點：添加了無意義標簽，不易於後期維護，違背了結構和表現的標準

2.給父元素添加 overflow：auto;

3.給父元素也浮動

缺點：影響整體頁面布局，若父元素也有父元素呢？

4.使用after偽元素

給父元素添加一個類，即看不見的清除浮動的元素

.clearfix:after
{
content:".";
dispaly:block;
height:0;
clear:both;
visibility:hidden;
}

5.最優解

首先我們說一個CSS的概念——BFC塊級格式上下文，簡單來說就是只要屬性或方法觸發了BFC就可以防止高度塌陷.

以下屬性就是可以觸發BFC的部分

flaot:left;
overflow:auto;
dispaly:table-cell;
dispaly:table-caption;
display:inline-block;
position:fixed;
position:absolute;

前面幾個方法也是借助了這個原理，但都有些缺陷。下面我們來介紹一個比較優雅的方法來實現。

.clearfix:after,
.clearfix:before
{
content: " ";
display:table;
}
.clearfix:after
{
clear:both;
}

加入before對於清除浮動沒有影響，主要是為了解決瀏覽器頂部空白崩潰的問題。

例如：現有上下兩個盒子，上盒子設置了margin-bottom：10px，下盒子設置了margin-top：10px，按理說兩個盒子的上下距離應該是20px，但實際上只有10px，兩個盒子的外邊距會發生一個疊加。

父元素高度塌陷的解決辦法