悠悠博客 关注Ajax技术与web开发

body {
 margin: 0px;
}
#contener {
 border: 1px solid #000;
 margin: 10px 50px;/*左右外补丁margin=50px*/
}
#floatRight {
 float: right;
 border: 1px solid red;
 color: red;
 width: 30%;
}
#contenu {
 border: 1px solid blue;
 color: blue;
}
.spacer {
 clear: both;
 border: 1px solid #FF00FF;
 color: #FF00FF;
}

<div id="contener">
 <b>#contener</b>
 <div id="floatRight">
 <b>#floatRight</b> : Float block at the right of the block #contenu
 </div>
 <div id="contenu">
 <b>#contenu</b> : Simple block
 </div>
 <div class='spacer'>
 <b>.spacer</b> : a "spacer" block...
 </div>
</div>

body {
 margin: 10px 50px; /* 给body增加marign */
}
#contener {
 border: 1px solid #000;
 /* margin: 10px 50px; 取消#contener的margin,也就是给他外围增加margin替代自身margin*/
}