CSS用了clear:left之后，margin-top失效

又是一个奇怪的CSS问题，为什么CSS总有这么多不确定因素呢？对前端开发人员实在是中打击，又丧失了点对CSS的热情了。

且看代码：

 

#div1{
  float:left;
}

#div2{
  clear:left;
  margin-top:20px;
}

 照理讲，div2应该和div1差20个像素，但是事实证明他们之间一点空隙也没有，解决方法是不得不在html中加：

<div style="clear:both;"></div>

 意思就是先上这个块把float的效果彻底清空，然后解下去的div2才能和什么事情都没有发生过一样正常发生作用。从HTML代 码结构来讲，以上的这段是没有意义的，只是为了对CSS这种变态的行为做妥协，我觉得这种体验非常糟糕，真希望在将来的某一天CSS能变的好用一点。