对float的理解

从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下边。