css浮动处理备忘

用到的代码：

#first{float:left;width:100px;     
#second{float:left;clear:left;margin-top:10px;width:100px;

<div id="first">a</div>
<div id="second">b</div>

效果：

上面这种现象应该怎么理解为好？

clear:left 清除左浮动。那么就意味着不会受到之前元素所设置的float:left;影响。此时，再本元素中设置float:left;的时候，就不会受到之前元素浮动的干扰。那么，如果受到之前元素的干扰，会是什么情况。也就是接着之前的浮动，继续进行浮动。而不是开始新的浮动。

二、三个div同时进行左浮动

总结：a元素左浮动。b元素右浮动。假如c元素跟着左浮动。由于装不下，被挤到左边。原以为另起一行，不会与b元素相邻。没想到竟然会掉到最左边的空隙中去。形成了上面的效果

三、脱离正常文档流的div与没有脱离的混合显示重合了

#first{float:left;width:100px;     #second{float:left;margin-top:10px;width:100px;
     #third{zoom:1; width:200px;margin-left:110px;_margin-left:107px;

也就是三个div都保持了在同一行的。原因是：按照正常的文档流。那么它不会受到前面元素的影响。那些不遵循正常秩序(文档流)的元素。并不会干扰这些遵循正常秩序的元素。上面的第三个div还是按原来的文档流保持在第一行(是由于设置了margin-left才靠右的。如果该值为0.就会马上看到看到靠左的效果)