推薦倆種依靠clear屬於清除浮動的方法，推薦第二種，探究的記錄在後面，趕時間的看個開頭就好了。
1. 在受浮動坍塌的父級元素結束標簽前，添加壹個高寬為0的空div，然後設置 clear:both
2 .創建壹個clearfix樣式，並使用偽類元素 after 添加樣式到父元素上
無論是塊級元素還是行內元素設置了浮動之後都會生成壹個塊級框，並且可以編輯它的寬高，此時該浮動元素就脫離了文檔流。舉個例子，把網頁看成壹個三維的泳池，文檔流在泳池底部，給文檔流中壹個元素設置了float之後，它就從這個網頁的泳池底部浮動到了水上。此時同級的塊級元素會無視float元素在網頁上的位置進行布局。但是行內元素並不會被遮擋，而是像和它壹起浮在水面上壹樣環繞這個浮動元素。
根據前面介紹，元素設置float後好像會從網頁上浮壹樣，脫離文檔流。這樣的話，如果父級元素原本沒設置高度，計劃用子元素撐開父級元素。此時子元素因為float上浮，則父級元素的高度就會因為自身沒設置而坍塌。
來個示例 ( 下文都是依據這個示例來討論，故先給出HTML結構和CSS樣式 )：
讓我們再打開開發者工具具體看看
然後讓我們把父元素也壹同浮動看看
例如:
此時背景色為粉色的 ch2 就會被浮動的 背景色半透明的ch1 覆蓋，但是ch2的字體還是環繞著ch1
如果讓ch2 也浮動，則ch1 和 ch2 就相當於壹同浮起到這個網頁泳池的水面上。
另外，ch2 雖然不浮動起來時會被 同級ch1遮擋，但是ch2 它內部的行內元素卻是環繞 ch1 的 ,同時 ch2 內部的塊級元素還是會被浮動起來的ch1遮擋。
解決父元素高度坍塌的問題，其實可以給父元素指定個高度，但這樣就沒有父元素高度自適應的意義了；另外全部元素壹起浮動也能解決父元素坍塌，子元素被遮擋的問題，但這本質上只是將所有元素壹起浮動到頂端，並沒有解決問題，反而還會影響另外的元素排列。下面介紹clear屬性來清除浮動
那我們先來看看 clear 屬性有什麽用
我們稍稍改動壹下上面的例子在 ch2 下加壹個 p 標簽然，然後改動壹下 ch1 和 ch2 的樣式讓它們倆高度不壹樣。
若此時我們給p元素也加上浮動呢？
樣例：