在講解之前 我們需要知道一個名詞：文件流 

他的意思是這樣描述的：頁面元素按照從上至下、從左至右排列而成的文件結構，稱為文件流。

浮動：float

描述：浮動就是讓元素脫離文件流，相當於漂浮在頁面之上，不佔用文件流空間  後面文件流樣式會移上去佔用漂浮的空間， 顯示在頁面看文件流的結構被浮動元素壓在下面

本質：為了實現文字環繞效果，但我們目前更多的就是利用了這個特性，來使得塊元素排成一行

 語法：float：left  |    right （向左浮動：元素脫離文件流，並靠著所在容器的左側排列    向右浮動：元素脫離文件流，並靠著所在容器的右側排列）

漂浮之前樣式                                                                                                            加了紫色盒子左浮動   紅色盒子右浮動的樣式

他們所在容器的就是dahezi     所以添加了浮動之後就在dahezi這個容器裡面左浮動右浮動

有幾個要說明的地方  我會挨著做案例分析講解  

①由於浮動本身是為了實現文字環繞，所以浮動元素僅會遮擋文件流元素的結構  卻不會遮擋文件流中的文字

遮擋結構前的樣式                                                                                                只給第一個紫色盒子新增左浮動後 遮擋紅色結構後的樣式

給裡面新增文字前的樣式                                                                                              新增文字後頁面的樣式（並沒有把第二個盒子裡面的文字給蓋住）

 ② 如果多個元素髮生了浮動  那麼多個元素會排列稱為一排，如果第一排最後浮動的寬度大於第一排餘留的寬度  那麼會另起一行顯示在第二排的左邊或者右面   浮動元素會緊貼在一起排列

三個盒子沒浮動之前根據文件流排列的                                                         三個盒子浮動之後的排列樣式

 ③如果一個元素髮生了浮動，那麼這個元素既不是行元素，也不是塊元素，而被稱為【浮動元素】  浮動元素的大小僅由自己控制

過程中有關浮動的最大問題：當一個父元素沒有設定高度的時候，其高度應該由其內部的子元素高度撐開，

此時如果子元素髮生了浮動，就會導致父元素的高度丟失 這種現象稱為【高度塌陷】

當我們沒有給父元素設定高度的時候，也沒給子元素新增浮動是這樣是的                                  當父元素沒有設定高度，給子元素全部新增浮動是這樣子的

此時父元素高度就是子元素相加的高度                                                                                         此時父元素的高度沒有變成了一條直線   

 解決高度塌陷 

辦法一                                                                                                                                   辦法二

只需要在浮動的後面新增一個空白的塊元素                                                                          給父元素新增overflow：hidden  

並對這個塊元素設定clear：both樣式

 清除浮動最常用的方法就是上面兩種   其它方法還有空白元素法   和  父級偽元素：：after新增clear：both