前面有一篇部落格中有提到關於」浮動塌陷」的描述
由於包含元素裡面的元素都設定為浮動，導致包含元素的高度塌陷為0，如下圖所示：
這種塌陷進而會產生如下後果：
clear屬性有五種可能的值：
right：不允許右邊出現浮動元素
left: 不允許左邊出現浮動元素
both：不允許兩邊出現浮動元素
none：預設值，允許兩邊出現浮動元素
inherit：繼承
class="container">
class="float1">float-1
div>
class="float2">float-2
div>
div>
1、不設定float時：父元素高度為兩個子塊狀元素的高度和
2、子元素都設定浮動時：父元素高度為0，發生了」浮動塌陷」
.container
.container
.float1
.container
.float2
4、當給子元素float2新增clear：left 時，float2元素下移，但是父元素仍然
5、在子元素後面新增乙個空的div，然後這個div設定clear：both；或者clear：left；
html結構
class="container">
class="float1">float-1
div>
class="float2">float-2
div>
class="clear">div>
div>
css樣式
.container
.container
.float1
.container
.float2
.clear
只給父元素設定overflow：hidden；或者auto，就可以了；
給父元素設定：
：after偽元素
.container
.container
:after
.container
.float1
.container
.float2
清除浮動的幾種方法
1.浮動元素下加空div 為了統一樣式，我們新建乙個樣式選擇器class命名為 clear 並且對應選擇器樣式為 clear both 然後我們在父級 結束前加此div引入class clear 樣式。這樣即可清除浮動。這個class 清除float產生浮動，可以不用對父級設定高度 也無需技術父級高...
清除浮動的幾種方法
當元素浮動時，他將不再處於普通文件流中，相當於浮在文件之上，不佔據空間，但是會縮短行寬，產生文字環繞的效果。浮動帶來的影響 1，父級的高度塌陷 2.背景不能顯示 3.變框不能撐開 4.margin值不能正確顯示 5.產生文字環繞的效果 6.由於脫離文件流，不佔位，而後面的元素未脫離文件流導致後面的元...
清除浮動的幾種方法
style float left 為了解決container容器高度塌陷問題，我們必須清除浮動 第一種方法 在container元素後加上乙個空的div標籤，然後給設定乙個clear both的樣式 第二種方法 給container容器新增 overflow auto hidden樣式 第三張方法 ...