class=b的div为什么右侧的margin会超出class=a的div？

Question

 <div class="a">
             <div class="b"></div>
     </div>
.a{
    width: 100px;
    height: 100px;
    background-color: red;
}
.b{
    margin: 20px;
    width: 50px;
    height: 50px;
    background-color: blue;
}

Answer 1

如果外层div没有设置边框或是内边距的话，也即没有东西挡着它的话，内部外边会穿透到外层，跟外层平行

Answer 2

查查BFC？这个问题网上还是好多的。
设置一下overflow:hidden;?

Answer 3

这是由于外边距叠加造成的：两个或多个毗邻的普通流中的块元素垂直方向上的 margin 会折叠

解决办法：在.a元素上触发 BFC，外边距叠加就会被取消了。