蛐蛐工作室近日为了在做一个企业站，为了seo期间，把网站的侧边栏代码放到了后面，主页面放到了前面，因为侧边栏很少更新，具体是这样的。

<div>

<div style="float:right"><div>

<div style="float:left"></div>

<div id="footer"></div>

</div>

结果这样之后麻烦出现了，无论我怎么弄footer始终都与上面的div紧靠齐，本来是margin-top:10px的，有一定间隔，这样看起来美观，没想到却造成了与上端紧对齐的情况。

原来在firefox下是这样的，上面的对象浮动，而下面的对象footer并没有浮动，这样就造成了margin-top失效。

解决的方法有两种，一种是把margin-top使用于父容器，例如：不过这样对于浮动对象高度不确定的情况下就难说了，对于确定的还好说，利用ie与ff的hack书写即可解决，但如果不确定的情况下就需要第二种方法派上用场了，在浮动对象下面加一个<div style="clear:both">这样便完美解决了footer对上面的对象margin-top失效的问题。例如大家可以观察一下郑州seo的网页源码，首页每篇摘要的div下面均有一个<div id="fixed"></div>目的就是为了兼容在ff下margin-top失效的问题。

当然这并不是唯一解决的方法，我们可以灵活运用div+css，可以把footer做下单独一个外置容器写到网页代码中，而footer之上的用container包起来做为一个大的容器，也是一个好的“ff下margin-top失效的解决方法“。

另外这次写代码使我意识到了一个问题，之前写css时一直整站都是class选择器，id就没出现过一次，而这次是id与css相结合的写法，发现问题百出，所以以后对于中小型网站来说，全部用class选择器出问题的机率小一些，对布局的兼容性非常有利。