技術標籤：總結

高度坍塌的根源是：常規流盒子的自動高度在計算時，不會考慮浮動盒子

清除浮動

1. 給父元素一個固定的高度
   （不建議使用，不夠靈活）
   

子元素浮動的時候，會在其內部建立一個新的bfc，此時，父元素的處於html這個根元素的渲染區域，然後子元素建立了新的bfc，也處於根元素的渲染範圍下，此時父元素和子元素的關係可以說只是視覺上的，並沒有更深的聯絡

body只有0
2. 給父元素新增屬性overflow：hidden;
原理是利用overflow：hidden;建立了一個新的bfc，在新的bfc裡面，自動高度會計算浮動元素的高度，於是有了這種解決高度坍塌的方法
缺點：當子元素有定位屬性時，設定 overflow: hidden; 容器以外的部分會被裁剪掉。可能會和我們想得到的預期效果不一樣

就像這張圖，想要得到的文字部分為隱藏

3. 給父元素設定偽元素選擇器，並設定常用的清除浮動的樣式，然後after就會把盒子撐開

 .clearfix::after{
    content: "";
    display: block;
    clear: both;
}

想要注意的是一定要設定display: block;，因為after預設是行盒
4. 在子元素的末尾新增一個空的 div ，並設定相應的清除浮動樣式
簡單來說就是盒子套盒子，用這個空的div代替方法3的after，這樣不好，因為直接增加了緩衝壓力，會讓程式碼無意義的變長