首先了解下什么是高度塌陷
- 作為前端開發者都知道，在HTML 中父元素在沒有設置高度的時候，其默認高度是會被子元素撐開的，也就是子元素有多高，父元素就有多高，但當其所有子節點都浮動的時候，就會脫離文檔流，此時父元素的高度就會丟失。如果在沒有設置邊框屬性的情況下是比較難發現的，并會影響使布局變得混亂，達不到預期布局。
<body>
<div class="parent">
<div class="child child1"></div>
<div class="child child2"></div>
<div class="child child3"></div>
</div>
<div class="other"></div>
</body>
如上結構在class="parent" 的子元素沒有設置浮動時的效果預期應該是如下所示的：
Screen Shot 2019-03-17 at 10.13.25 AM.png
此時父元素的高度是等于三個子結點撐開的高度。
當給class=“parent”的三個子div設置了float: left的時候，如下圖所示，出現了頁面布局混亂，而class="parent"的這個父div的height變成了0，它里面的三個子div是浮動排列的，而class="other"的這個div“跑到”它上面的元素的位置上去了，就好像它上面的元素都并不存在似的，這個就是“高度塌陷”問題了 。
Screen Shot 2019-03-17 at 10.21.35 AM.png
解決辦法
想達到如下圖所示的布局效果：
Screen Shot 2019-03-17 at 10.31.55 AM.png
1. 方法一
在class=“parent”元素內添加一個空的DIV標簽，并設置如下CSS
.clear {
clear: both;
}
缺點: 增加了無意義的標簽。
2. 方法二
讓父元素本身也浮動
缺點: 雖然可以撐開父元素，但會使父元素寬度丟失，而且導致下面的元素會上移，使與父元素相鄰元素的布局受到影響。
3. 方法三
通過給父元素添加:after偽類， 最推薦的方法
給父元素添加如下CSS樣式
.parent:after {
content: "."; /*生成內容作為最后一個元素，至于content里面是什么沒有影響*/
display: block; /*使生成的元素以塊級元素顯示，占滿剩余空間*/
height: 0; /*避免生成的內容破壞原有空間的高度*/
clear: both; /*閉合浮動*/
visibility: hidden; /*使生成內容不可見，并允許可能生成內容蓋住的內容進行點擊和交互*/
}
利用偽類來清除浮動，其效果跟創建一個空的div并設置其為clear：both；是一樣的，只不過這里用偽類代替了空的div元素，不會影響任何其他樣式，通用性強，覆蓋面廣。
