有关内层div设margin，在外层不起作用的解决方案

这个问题别人向我提了多次，但是我没有怎么重视，今天一同事，再次问我，我特意留意了一下。

先看例子：（有问题的例子）

 <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,问题解决了。