CSS float 浮动问题

 <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>

转载于:https://www.cnblogs.com/houbusheng123/archive/2010/08/24/1807604.html