從IE6下的雙邊距引出

對一個div設置float:left;同時設置了margin-left:100px時在IE6下會出現雙邊距。

有兩種解決辦法：

1，推薦辦法。加display:inline

2，不推薦。使用hack方式。比如加_margin-left:50px；即可/*減半*/

display:inline為什么能夠解決這個bug呢？

看看float的定義：（w3地址:http://www.w3.org/TR/CSS2/visuren.html）

"This property specifies whether a box should float to the left, right, or not at all. It may be set for elements that generate boxes that are not absolutely positioned. The values of this property have the following meanings:

left?
The element generates a block box that is floated to the left. Content flows on the right side of the box, starting at the top (subject to the 'clear' property). The 'display' is ignored, unless it has the value 'none'.

right?
Same as 'left', but content flows on the left side of the box, starting at the top.

none
The box is not floated. "

也就是說，當你將浮動元素的display設置為“inline”值的時候，是完全沒有問題的。因為無論你怎么設置，它都會失效。只要以后的瀏覽器還把W3C推薦的標準當作標準去執行的話，那么通過設置“display:inline;”方式來修正這個bug就不會產生副作用，這也是為什么這個方式得到推薦的原因。

?

CSS浮動(float,clear)通俗講解?

?

假如某個div元素A是浮動的，如果A元素上一個元素也是浮動的，那么A元素會跟隨在上一個元素的后邊(如果一行放不下這兩個元素，那么A元素會被擠到下一行)；如果A元素上一個元素是標準流中的元素，那么A的相對垂直位置不會改變，也就是說A的頂部總是和上一個元素的底部對齊。

依然是根據結論，div2、div4浮動，脫離了標準流，因此div3將會自動上移，與div1組成標準流。div2發現上一個元素div1是標準流中的元素，因此div2相對垂直位置不變，與div1底部對齊。div4發現上一個元素div3是標準流中的元素，因此div4的頂部和div3的底部對齊，并且總是成立的，因為從圖中可以看出，div3上移后，div4也跟著上移，div4總是保證自己的頂部和上一個元素div3(標準流中的元素)的底部對齊。

?

清除浮動可以理解為打破橫向排列。

對于CSS的清除浮動(clear)，一定要牢記：這個規則只能影響使用清除的元素本身，不能影響其他元素。

要想讓div2下移，就必須在div2的CSS樣式中使用浮動。本例中div2的左邊有浮動元素div1，因此只要在div2的CSS樣式中使用clear:left;來指定div2元素左邊不允許出現浮動元素，這樣div2就被迫下移一行。

可以看出div2的右邊有一個浮動元素div1，那么我們可以在div2的CSS樣式中使用clear:right;來指定div2的右邊不允許出現浮動元素，這樣div2就被迫下移一行，排到div1下邊。?

轉載于:https://www.cnblogs.com/zccst/p/3636210.html

總結

以上是生活随笔為你收集整理的对float的理解的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。