这个问题别人向我提了多次，但是我没有怎么重视，今天一同事，再次问我，我特意留意了一下。
先看例子：（有问题的例子）
<style>
.a {background:red; width:300px; height:300px; } .b {background:green; position:relative; width:100px; height:20px; margin:10px;} .c {background:black; position:relative; width:100px; height:20px;}</style>
<div class="a"> <div class="b"></div> <div class="c"></div></div>
问题：.b { margin:10px;} margn-top:10px; 没有体现出来，效果却是margin-top:0;用firebug 看的话，我们可以看到margin-top:10px;是在的，但是效果却出现在最外层.a上面，所以一直有点困惑。
解决问题：
<style>
.a {background:red; width:300px; height:300px; float:left; }.b {background:green; position:relative; width:100px; height:20px; margin:10px;}.c {background:black; position:relative; width:100px; height:20px;}
.clear{ clear:both;}</style>
<div class="a"> <div class="b"></div> <div class="c"></div></div>
<div class="clear"></div>
我们在最外层加个浮动，然后在最外层的后面加个清除浮动就OK,问题解决了。
相关资源：敏捷开发V1.0.pptx
