clear元素的margintop被重置为零

当你使用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>

masthead content goes here

</div>

sidebar content goes here

</div>

main content goes here

<br/>

main content goes here

</div>

footer

</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;

}