float佈局致使的父容器高度坍塌問題及其解決方法

一，父容器高度坍塌問題

• 致使的緣由 浮動元素脫離文檔流，使包含它的無高度樣式的父容器感知不到其存在而發生內容沒法撐開高度的現象 實例圖：

• 解決方案 1.給父容器設置高度樣式(height) 缺點：只能適用於父容器高度固定的狀況下，註定了這種方案不多用；

  

2.由於浮動元素能夠感知到浮動元素的存在，因此能夠給父容器也設置浮動樣式，使其感知到其內的浮動元素 缺點：給父容器設置了浮動樣式後，父容器的父容器也會產生高度坍塌問題；

3.對父容器設置overflow: hidden/auto，觸發其BFC 缺點：設置hidden會致使超出部分直接被隱藏，且不佔據文檔流位置，而設置auto的話超出部分會生成一個滾動條，影響視覺效果。

4.使用僞類元素，再用僞類元素清除浮動 缺點：CSS代碼量增多

PS：此法要注意的是，必須是 after僞元素，且該僞類元素必須爲 block元素，緣由是 after僞元素在其父容器的其餘標籤的最後添加一個元素，渲染順序排在了其父容器內部的最後，而後設置 block元素是爲了避免讓其它元素與其一排，再對其設置清除浮動，父容器天然就被這個 after僞元素撐開了高度

5.使用塊級標籤撐開高度，此法和僞類法相似 缺點：增長了無心義的標籤