打开APP
userphoto
未登录

开通VIP,畅享免费电子书等14项超值服

开通VIP
clear元素的margin

 

当你使用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;
}
本站仅提供存储服务,所有内容均由用户发布,如发现有害或侵权内容,请点击举报
打开APP,阅读全文并永久保存 查看更多类似文章
猜你喜欢
类似文章
【热】打开小程序,算一算2024你的财运
一小时搞定DIV CSS布局
div+css网页标准版式布局 - 网站重构,div+css,DIV+CSS布局,web2...
海豚的WordPress Theme教程 part5
CSS高手布局:让footer完美处于网页下方
一个比较完美的spacer div技巧
关于margin
更多类似文章 >>
生活服务
热点新闻
分享 收藏 导长图 关注 下载文章
绑定账号成功
后续可登录账号畅享VIP特权!
如果VIP功能使用有故障,
可点击这里联系客服!

联系客服