CSS中的浮動

CSS中的的浮動

• float是css樣式中的定位屬性，用於設置標籤對象（如：div標籤盒子、span標籤、a標籤、em標籤等html標籤）的浮動佈局，浮動也就是咱們所說標籤對象浮動居左靠左（float:left）和浮動居右靠右(float:right)。
• 做用：默認的流式佈局有不足。 浮動的目的就是爲了讓男標籤能夠並排顯示。
• 格式：float: left / right / none none默認的不浮動。

浮動的特色

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

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

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

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

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

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

7.若是元素浮動了，那麼它會形成影響：形成父元素高度塌陷。解決:顯示加高度（加高法） 小偏方（overflow:hidden）

8.若是元素浮動了，它也會形成對後面的兄弟元素影響。解決：clear:both/left/right

9.應用：實現左右佈局 小導航 多個規則盒子水平排列（行內塊）

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

11.若是一個元素浮動了,它的性質就會發生改變。若是一個行內元素浮動了，那麼就能夠設置寬高了，至關於把它變成塊級元素。

12.若是父元素也浮動了，那麼就不會出現高度塌陷了。

13.若是有左浮動，又有右浮動，那麼你須要把右浮動的元素寫在左左浮動的前面 ??

14.寫三個盒子，利用27種狀況去討論最後的顯示。

15.浮動元素會從標準文檔流中半脫離出來。證實：字圍

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

元素浮動會形成影響（清除浮動）：

1，對父元素形成的影響

• 父元素高度塌陷
  • 解決：顯示加高度（加高法） 小偏方（overflow:hidden） clear:both
    • 加高法：簡單 基本不用 大部分狀況狀況下，父元素的高度是須要子元素撐起來
    • overflow:hidden:簡單使用了overflow:hidden父元素的高度會隨着子元素的高度變化而化
    • overflow:hidden本職工做是用來處理溢出 在使用過程當中，須要注意子元素若是想要超出父元素高度，此時overflow:hidden就不適合了
    • clear:both 在全部子元素後面加一個空的div 在這個div上面加clear:both ---> 內qiang法
    • 優勢：clear:both專業清除浮動的 缺點：多寫一個代碼

2，對後面兄弟元素形成的影響

• 兄弟元素會向上移動

  • 解決：在受影響的元素上面的加 clear:both
  • 項目中最經常使用清除浮動的方法： 利用僞元素 after說白了，就是寫一個清除浮動的類，以下：

  .clear:after{content=""; display:block; clear:both; height:0; overflow:hidden;}

還沒有完工 隨後補上