well，利用float浮動來實現多個塊元素橫向布局已經是習以為常的事情了，同時我相信許多剛剛接觸float元素或者甚至剛剛才入行的小夥伴們會遇到一系列的問題。
例如這樣：（這孩子真霸道）
再比如這樣：（坑爹！這是要鬧哪樣！）
這裡我只是簡單的總結一下而已，畢竟鄙人也是一枚剛跳進前端的偽小白，同時算是給一些前端新人一種比較簡單的理解。
首先，簡單解釋一下float是什麼鬼，float英文翻譯是浮動的意思，而在html裡面是三種定位機制的其中一種（文件流、浮動、絕對定位），
在一般情況下，瀏覽器預設的時文件流（有的似乎叫普通流，不管了，大家明白就好）的定位機制。文件流，通俗來說就是塊元素像軍訓那樣一列從上到下排列下來。
而float呢，則像搞事的那樣脫離佇列，也就是脫離文件流。這是圖一box4應該的效果：
而這是因為box2（灰色那個box）的浮動。同時圖二的高度塌陷也是同樣的問題，由next box區域因上方三個boxfloat浮動的原因而導致曲線框的高度塌陷。
解決辦法：據我所了解有三種比較簡單的方法
1.在父元素style內或者在浮動元素下方新增div 適用css clear:both
2.在父元素內使用overflow:auto
3.在父元素內使用overflow:hidden
當然，不止這三種方法，這是我所了解而且感覺最容易的三種。
同時，這三種也是有缺點的。
1.使用這種方法會導致許多無用標籤的產生
2.overflow：auto，如果超出範圍會自動生成乙個滾動條，當然如果這滾動條並不妨礙你的思路，那也是無所謂的
3.hidden會導致超出部分直接隱藏且不佔據文件流的位置。
這個只是乙個個人比較通俗的**，如果想具體理論化的理解請去大牛們的部落格。我只是渣
以上就是我自身對於float浮動的一些理解，如果有什麼不對，或者還有什麼更好的方法，歡迎各位大牛指出，讓我這偽小白能學到更多。同時也希望看了這篇文章的讀者，能對你們有所幫助。
解決由float引起的「高度塌陷」問題
高度塌陷 是指父元素未設定高度和寬度，而且其只包含浮動的子元素時，該父元素的高度會產生 塌陷 換言之，當元素不具有實際高度時，就會產生 高度塌陷 解決 高度塌陷 問題的方法有如下幾個 1.在父元素結束前加乙個高度為0，寬度為0，且clear both的div。當然如果有未浮動的子元素，可以直接cle...
解決float帶來的父元素高度塌陷問題
1.為父元素新增高度。缺陷 高度要隨子元素所有高度變化而變化 2.clear屬性。使用 在浮動元素的同級元素新增clear屬性。缺陷 新增了多餘標籤 3.為父元素新增overflow hidden zoom 1屬性。缺陷 overflow hidden 會自動擷取超出父元素寬度的內容 4.為父元素新...
float浮動造成高度塌陷的解決辦法
float 是我們在頁面布局中常用的，也是非常重要的乙個屬性，可以讓頁面布局變得更加靈活。但是在繼續學習之後，尤其是掌握了寬高自適應之後，我們常常會發現乙個奇怪的現象 如果父元素沒有設定高度，而子元素都浮動了的話，父元素就 癟 了。就像下面這樣 html head meta charset utf ...