CSS——清除浮動的六種解決方案

   內容的高度撐起父元素容器的高度，效果圖以下


HTML和CSS代碼以下





給ｐ標籤加上浮動之後，ｐ｛float：left；｝，此時DIV塌陷，兩段內容同行顯示，效果以下：



 解決方案一：給前面一個父元素設置高度
　　　　　　
　　　　　　！企業開發中，能不寫高度就不寫，因此這種方式用得不多



解決方案二：給後面的盒子添加clear屬性；
　　　　　　　
　　　　　　！給某個元素添加clear屬性後，這個元素的margin屬性 就會失效

　　　　　　CSS代碼和效果圖以下：
　　　　　　






解決方案三：外牆法，在兩個盒子中間添加一個額外的塊級元素，並給這個添加的元素設置clear：both屬性。

　　　　　　！能夠讓下面的盒子使用margin－ｔｏｐ屬性，可是上面的盒子margin－bottom屬性失效；實際使用時能夠直接設置添加的塊級元素的高度，從而讓上下盒子產生邊距。

　　　　　　HTML代碼以下：
　　　　　







　　　　　　　　效果以下： 



解決方案四：內牆法，在第一個盒子全部子元素最後添加一個額外的塊級元素，給這個額外的塊級元素設置clear：both屬性。
　　　　　　　　
　　　　　　　！能夠讓第一個盒子使用margin－bottom屬性，也能夠讓第二個盒子使用margin－ｔｏｐ屬性。　　　　　 
　　　　　　　
　　　　　　HTML代碼以下：



效果如圖：
　

此時第一個盒子的高度被撐起，顯示出了背景色。但因爲添加了額外的元素，所以在開發中不推薦使用這種方式。



解決方案五：利用僞元素添加塊級元素清除浮動
　
　　代碼以下：
　


效果以下：

　　　　　　
解決方案六： overflow:hidden;   1.能夠將超出標籤範圍的內容裁剪掉
                                                         2.清除浮動
                                                         3.兩個嵌套的盒子，能夠讓裏面的盒子在設置margin-top時，外邊的盒子不被頂下來。


代碼以下：

 

 同時，上面盒子的margin-bottom和下邊盒子的margin-top均可以正常使用。

效果如圖：