clear元素的margin-top被重置为零

 

当你使用clear(left & both & right)清理一个浮动元素时，该元素的margin-top会被重置为0。所以为了创建浮动列，并使用footer进行浮动清理时，必须对浮动列（sidebar && content）都指定margin-bottom,最好margin-bottom相同。（Firefox会将margin-top重置0，而IE不重置footer的margin-top）。

 

clear-footer

例如：

分别在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;
}
posted @ 2008-05-07 15:10  Rain Man  阅读(1328)  评论(5)  编辑  收藏  举报