關於浮動那點事

浮動：默認的流式佈局有不足。浮動的目的就是爲了讓男標籤能夠並排顯示。

格式：float：left / right / none none默認的不浮動

1、浮動的特色及演示：

浮動初衷是爲了實現字圍（新聞），後面才發現，浮動可讓多個男標籤並排顯示。
複製代碼

1. 在一個父元素內部，若是一個元素浮動了，那麼它就脫離了標準文檔流，後面的元素就讓向上排

前

後

2. 浮動並無徹底地脫離了標準文檔流（破壞性--->撓曲），若是後面的元素內部有文字，這些文字會環繞在浮動元素的周圍，產生字圍。

前

後

3. 若是多個元素浮動了，那麼他們就會並排顯示，若是都是同一個方向的浮動，它們會牢牢地貼在一塊兒。

前

後

4. 若是一個元素浮動了，先向上移動，直到貼靠到父元素的邊界，接着，若是是左浮動，就向左移動，直到移動到父元素的左邊界，若是是向右浮動，就向右移動，直接移動到父元素的右邊界。（圖示爲右浮動）

前

後

5. 若是一個元素沒有設置高度，它的高度是靠裏面的內容撐起來的。若是父元素內部元素都浮動了，那麼會形成父元素的高度塌陷。

前

後

6. 當一個浮動起來的男盒子，沒有設置寬度，那麼這個盒子的寬高會盡量小，小到包裹住它裏面的內容，這叫包裹性

前

後

7. 若是一個元素浮動了，它會悄悄地作一個變性手術。若是一個女盒子浮動了，那麼就能夠設置寬高了，至關於把它變成男標籤。（這裏用span來演示）

前

後

8. 一個元素浮動了，那麼它也是受父元素的控制。當父元素寬度變小時，裝不下全部的子元素時，後面的子元素有貼靠性。當父元素小到極限時，裏面的浮動的子元素寬度是不會改變的。

前

後

2、元素浮動形成的影響

1.父子元素：子元素浮動會形成父元素高度塌陷（前提：父元素未設高度）

解決方法：①顯示加高法：padding-top（不推薦）
             ②溢出隱藏：overflow:hidden
             注意：父元素的高度會隨着子元素的高度變化而變化溢出；
                 在使用過程當中，須要注意子元素若是想要超出父元素高度，此時溢出就不適合了。
             ③常定義清除浮動的僞類，內容爲
               .clear:after{
                               content: "";
                               clear: both;
                               display: block
                           }
複製代碼

2.兄弟元素：上一個元素浮動後，下一個元素會上移

解決方法：在下一個元素中加入clear:both
複製代碼

小結：浮動佈局缺大於優，現經常使用flex彈性佈局