float浮動元素性質

1.浮動的元素脫標

  簡單理解爲:浮動的元素脫離標準文檔流，能夠設置寬高，能夠並排顯示

2.浮動的元素無margin缺陷

  兩個盒子之間的距離是兩個margin之和

3.浮動的元素依次貼邊顯示

   

貼邊順序：父盒子內側 ← 子盒子1 ← 子盒子2 ← 子盒子3 ← 子盒子4。。。。。

 

若是前一個盒子剩餘的寬度不夠，會再前一個貼邊。

浮動的元素不會鑽盒子：

4.浮動的元素讓出標準流的位置

   理解：倆個同級的盒子，前面的盒子左浮動，後面的盒子不浮動。浮動的元素會讓出標準流的位置。

 

5.字圍效果

  理解：倆個同級的盒子，前面的盒子左浮動，後面的盒子不浮動。不浮動的盒子裏面的文字不會壓蓋住，會在浮動的盒子周圍顯示。

二。浮動元素存在的問題

   問題描述：1.浮動的元素不能撐高父盒子的高度（高度自適應）

                     2 浮動的元素影響後面的元素.

   解決方式：1.給父親盒子增長高度屬性

                         結果描述：高度自適應  （未解決）  

                     2.給父盒子增長clear:both;屬性（清除浮動）

                         結果描述：高度自適應  （未解決）  

                    3.（外牆法）在兩個盒子之間添加一堵「有高度的」牆

                         結果描述：高度自適應  （未解決）  

                    4.（內牆法）在全部浮動的元素最後添加一堵「清除浮動的」牆.（clear:both）

                           結果描述：問題解決  

                          不可取：增長了一些標籤

                      5.overflow屬性

                       理解：溢出隱藏處理

                       overflow:auto;溢出滾動：

                       overflow:hidden;溢出隱藏  

                       對父盒子添加overflow屬性能夠決全部的問題

                         overflow:hidden;兩個引伸含義：1.強制讓父盒子檢測內部子盒子元素高度，而且將檢測到的高度撐高自身

                                                                             2.強制讓父盒子管理住浮動的元素，不讓子盒子影響到其餘元素

 

           總結：同級元素要浮動都浮動，不浮動都不浮動；子盒子浮動，父盒子儘可能增長overflow：hidden屬性