日期:2014-05-17  浏览次数:20657 次

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能变的好用一点。