浮動（float）和清除浮動

  在css的學習中，浮動能夠說是很是重要的，固然重點既是難點，因此作了一篇對浮動的總結，但願看後對你有些幫助。

  （一）使用浮動的緣由

          咱們都知道css將咱們熟知的標籤分爲了兩種：1.塊級元素；2.行級元素；而且規定了快級元素獨佔一行，而行級元素不能設置寬高，他的寬高只能有裏面的內容撐出。這是css標準文檔流中一些規定。那麼當咱們想給行級元素設置寬高時，就顯得無助了，固然咱們能夠經過display:block;來把行級元素轉行爲塊級元素，這個是能夠的，那它轉換以後又會收到塊級規定的限制。因此最好的辦法就是掙脫標準文檔流的限制，這就是咱們常說的脫標。經常使用的脫標有三種手段：1.浮動；2.絕對定位；3.固定定位。

         使用浮動的緣由就是脫離標準文檔流的控制，脫標後的元素不在有塊級和行級之分了，你能夠隨意設置寬高級其餘的樣式了。

  （二）浮動元素的特色

          1.貼靠

            所謂貼靠，就是說當有連續浮動的元素時，下一個浮動的元素會自動貼近前一個浮動的元素，若是前一個未浮動，就會貼近左上角。舉個例子：

             

圖中出現了貼靠特性，1貼近了左上角，2貼近1，3貼近2.這個浮動貼靠很好理解。

   2. 「字圍」效果

        「字圍」顧名思義，就是實現文字環繞效果，文字包圍的能夠是一張圖或者其餘的什麼東西。

 在這裏我要指明一點的是 ；咱們讓div浮動，文字並未出如今圖片的下方，被圖片遮蓋，而是按照標準文本流排列，這是由於浮動只是擋住了標籤p，而不能擋住文本中的內容；還有就是「字圍「效果只對漢子有效果，對於字母和數字沒有效果的,這一點必定要記清楚。這段標註的文字是我說的不正確的，在評論區裏說的是字母是按照空格鍵做爲結束的，因此英文字母也會出現「字圍」效果。。。。謝謝博友的指正。。。。

 3.收縮

   一個浮動元素若是沒有設置寬度，那麼就會自動收縮到文字的寬度。

  說完了浮動元素的特色，接下來講說清除浮動的方法吧，（ps：真是無語了，好不容易浮動了，還要想辦法清除，鬧心）

 （四）清除浮動

    總的來講清除浮動總共有4種方法：1.給浮動元素的祖先元素增長高度；2.使用clear：both；屬性；3.隔牆發；4.使用overflow：hidden；屬性。而咱們要清除的影響主要是浮動元素的相互貼靠的特色；

     1.給浮動元素的祖先元素增長高度

        若是已經浮動的祖先元沒有增長高度，那麼咱們的這個浮動就會影響到下一個元素的浮動，這是由於浮動的貼靠的特色。

 

圖中由於咱們沒有給父元素增長高度，出現的貼靠的問題，再看看增長高度以後：

增長高度以後，就不會出現貼靠的問題了，可是在實際中咱們不建議使用這種辦法來清除浮動。

 2.使用clear：both;

   使用clear：both;來清除浮動有一個問題就是margin的做用失效，浮動元素會上下貼靠在一塊兒。並且不能經過margin調節；

   

要說的是clear：both；是清除其餘浮動元素對個人影響，寫在個人內部，而不是個人其餘元素的內容裏，這要記好，否則會和第三種方法記混的。圖中能夠看出，兩個浮動元素上下牢牢連在一塊兒，沒有辦法了，margin失效了。那麼這個的使用效果也就很差了，也不建議使用。由於這個問題，就出先了隔牆法。

 3.隔牆法

   由於使用clear：both；那個外邊距失效的問題存在，隔牆法實用性就顯得很是方便了。所謂隔牆法，就是說在浮動元素之間增長一道牆，隔開浮動元素。

 這是隔牆法中的外牆法，固然，咱們能夠經過改變外牆的高度來調節上下的距離了。接下來是內牆法。這個實用的範圍很廣，也是經常使用的清除浮動的辦法。

外牆法和內牆法的區別：

     1.二着所處的位置不一樣；

     2.兩者增長的高度的計算方式不用；（不要深究）

對於隔牆法，記着他的使用方法就能夠了，至於原理能夠簡單瞭解，沒必要深究了。再有就是最後一種辦法。

 4.overflow：hidden；

   overflow：hidden；就是溢出隱藏的意思，那麼他是怎樣來解決浮動的問題的那？？

咱們來看看overflow：hidden的特色：

 

 

能夠看出，當咱們增長這個屬性時，父元素會選擇子元素中高度最大的那個元素的高做爲容器的高。這樣咱們也就爲父元素增長了高度了，固然能夠困住已經浮動煩人元素了。

總的來講元素浮動是學習css的重中之重，是學習好css的關鍵，但願個人這些小見解，對你的學習有所幫助。。。