火狐中margin-top.docVIP

（一）margin-top失效 ?? 先看下面代码： divdiv class=box1 float:left/divdiv class=box2clear:both; margin-top:20px;/div/div 两个层box1和box2，box1具有浮动属性，box2没有，这时候设置box2的上边距 margin-top没有效果。 ? !DOCTYPE a href=/bkhtml/c22/ target=_blank title=HTML/JavaScript教程HTML/a PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN /TR/xhtml1/DTD/xhtml1-transitional.dtdhtml a href=/bkhtml/c21/ target=_blank title=XML教程XML/ans=/1999/xhtmlheadmeta http-equiv=Content-Type content=text/html; charset=utf-8 /titleFirefox下margin-top问题/titlestyle type=text/a href=/bkhtml/c23/ target=_blank title=CSS教程CSS/a!--* {margin:0;padding:0;}.box1{float:left;width:500px;height:100px;background:#999;}.box2{margin-top:20px;width:500px;height:50px;background:#000;color:#fff;clear:both;}--/style/headbodydivdiv class=box1 float:left/divdiv class=box2clear:both; margin-top:20px;/div/div/body/html ? 网上能找到的两种比较靠谱的解释：1：“在css2.1中，水平的margin不会被折叠；垂直margin可能在一些盒模型中被折叠…”2：当第一个层浮动，而第二个没浮动层的margin会被压缩 ，详见--浮动元素后非浮动元素的margin的处理（ 地址 ）。 得到解决问题思路：要浮动一起浮动，要就一起不浮动。 解决办法： 1.box2增加float属性2.box1与box2之间增加一层div style=clear:both;/div ? （二）子元素设置margin-top作用于父容器 div class=box style=height:100px;background:red;??div class=box2clear:both; margin-top:20px;height:50px;width:500px;background:#000;/div/div 当给box2设置margin-top时，在FF下仅作用于父容器。 ? !DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN /TR/xhtml1/DTD/xhtml1-transitional.dtdhtml xmlns=/1999/xhtmlheadmeta http-equiv=Content-Type content=text/html; charset=utf-8 /titleFirefox下margin-top问题/titlestyle type=text/css!--* {margin:0;padding:0;}.box2{margin-top:20px;width:500px;height:50px;background:#000;color:#fff;}--/style/headbodydiv class=box style=height:100px;background:red;div class=box2clear:both; margin-top:20px;height:50px;width:500px;background:#000;/div/div/body/html ? 解决办法： 1.给父容器box加overflow:hidden;属性2.父容器box加border除none以外的属性3.用父容器box的padding-top代替margin-top