CSS核心浮動float總結

格式：float: left / right / none none默認的不浮動 left會向左邊進行浮動，right會向右邊進行浮動。 浮動的做用是爲了讓男標籤並排顯示。 浮動的特色： 1.若是有左浮動，又有右浮動，那麼你須要把右浮動的元素寫在左左浮動的前面。
2.在一個父元素內部，若是一個元素浮動了，那麼它就脫離了標準文檔流，後面的元素就讓向上排，它也會形成對後面的兄弟元素影響。解決：clear:both/left/right 。 3.浮動並無徹底地脫離了標準文檔流（破壞性--->flex），若是後面的元素內部有文字，這些文字會環繞在浮動元素的周偉，產生字圍。 4.若是多個元素浮動了，那麼這們就會並排顯示，若是都是同一個方向的浮動，它們會牢牢地貼在一塊兒。當父元素寬度變小時，裝不下全部的子元素時，後面的子元素有貼靠性。當父元素小到極限時，裏面的浮動的子元素寬度是不會改變的。 5.若是一個元素浮動了，先向上移動，直到貼靠到父元素的邊界，接着，若是是左浮動，就向左移動，直到移動到父元素的左邊界，若是是向右浮動，就向右移動，直接移動到父元素的右邊界。 6.若是一個元素沒有設置高度，它的高度是靠裏面的內容撐起來的。若是父元素內部元素都浮動了，那麼會形成父元素的高度塌陷。 7.若是元素浮動了，那麼它會形成影響：形成父元素高度塌陷。解決:顯示加高度（加高法） 小偏方（overflow:hidden），可是若是父元素也浮動了，那麼就不會出現高度塌陷了。 8.當一個浮動起來的男盒子，沒有設置width，那麼這個盒子的寬高會盡量小，小到包裹住它裏面的內容，這叫包裹性。 9.若是一個元素浮動了，它會悄悄地作一個變性手術。若是一個女盒子浮動了，那麼就能夠設置寬高了，至關於把它變成男標籤。

元素浮動會形成影響（清除浮動）： 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;}

。