当你使用clear(left & both & right)清理一个浮动元素时,该元素的margin-top会被重置为0。所以为了创建浮动列,并使用footer进行浮动清理时,必须对浮动列(sidebar && content)都指定margin-bottom,最好margin-bottom相同。(Firefox会将margin-top重置0,而IE不重置footer的margin-top)。
例如:
分别在Firefox和IE中运行一下代码,仔细读者会发现页脚(footer)的margin-top在火狐中并没有显示,而在IE中却出现了10像素的上边距。
HTML代码
<body><div id="wrapper"> <div id="masthead"> masthead content goes here
</div> <div id="sidebar"> sidebar content goes here
</div> <div id="content"> main content goes here
<br/> main content goes here
</div> <div id="footer"> footer
</div></div></body> CSS代码body {
margin:
0;
padding:
0;
background-color:
#FFFFCC;
}
#wrapper {
width:
800px;
margin:
0 auto;
}
/*Masthead*/
#masthead {
padding:
10px;
background:
#FFCC33;
margin-bottom:
10px;
}
/*Content*/
#content {
float:
left;
width:
60%;
background:
#CCCCCC;
}
/*Sidebar*/
#sidebar {
float:
right;
width:
36%;
background:
#999999;
}
/*Footer*/
#footer {
clear:
both;
padding:
10px;
background:
#FFCC33;
}
本站仅提供存储服务,所有内容均由用户发布,如发现有害或侵权内容,请
点击举报。