float:left却不在最左边的原因之一

<div>
<div style="border:1px solid yellow;height:20px;margin:10px;"><div style="line-height:50px;float:left;border:1px solid green;margin-right:10px;">float:left;</div><div style="clear:both;"></div></div>


	<div style="border:1px solid;"><div style="float:left;border:1px solid red;">float:left;</div><div style="clear:both;"></div></div>
</div>

测试代码

显示效果,可以看到红色框不在最左边,在某些情况下,如果看不见第一个float话,就会很郁闷,float第二个不在最左.解决float问题得找与它最近的,有没有另一个的高度超过了顶边