-浮動-，相信對於很多前端的同學都不是事，不過最近有後端小哥哥向我詢問關於浮動的問題，下面我就簡單介紹一下浮動會產生什麼問題，並且該怎樣去解決，相信聰明的你一看就懂了。
在講浮動之前，首先宣告一下行內元素和塊級元素的概念：簡單來說，行內元素就是不可設定寬高，且與其它元素併排顯示的元素（a、img標籤等），而塊級元素是可以設定寬高且獨佔一行的元素（p、div標籤等）。
display：block; 行內元素轉塊級元素
display：inline 塊級元素轉行內元素
display：inline-block (行內塊)即可以設定寬高又可以併排顯示
元素浮動後，會脫離標準文件流。脫標的元素不再區分塊級元素和行內元素，即既可以設定寬高又可以併排顯示。
元素浮動產生的影響：
1、浮動的元素不能撐高父盒子
2、浮動元素會影響後面浮動的元素（元素異位）
如下：
.box
完美解決：只需為父元素設定 overflow： hidden樣式就可以了
解開注釋後
解決辦法還有很多，如為父元素設定高度，外牆法、內牆法等，不過都有一定的問題，感興趣的同學可以自行上網了解。
浮動產生的問題以及解決辦法
子元素脫離文件流不佔位，父元素的高度撐不起來，下面的元素會往上移動。1 給浮動元素的父元素設定高度 但是不靈活 2，給浮動元素的父元素設定overflow hidden scroll auto 常用 溢位隱藏，父元素要知道子元素是否溢位，浮動元素也參與計算 3,在浮動元素的後面加乙個空的塊元素 二者...
css浮動產生的高度坍塌以及解決高度坍塌的多種方法
1 給元素新增overflow hidden 原理 觸發bfc 弊端 overflow hidden 還有乙個作用就是超出隱藏，會隱藏掉元素內部定位的元素外部區域 具體實現 如下 12 3456 123 2 使用clear both清除浮動 原理 給元素內部浮動元素新增一同級空的標籤，給該空標籤設定...
IE6下margin時，float浮動產生雙倍邊距
今天遇到了乙個ie6下的相容性問題，雖然ie6已經不被大眾所期待了，使用者也已基本上消失的所剩無幾，但是，作為乙個問題而存在，我們有必要嘗試的去研究一下bug的改善方法 對元素float left，然後再對元素設定margin left 40px，除錯時候，鬼一般的出現了雙倍的margin left...