鍍金池/ 問答/HTML/ class=b的div為什么右側(cè)的margin會(huì)超出class=a的div？

class=b的div為什么右側(cè)的margin會(huì)超出class=a的div？

圖片描述

 <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;
}
回答
編輯回答
墨染殤

如果外層div沒有設(shè)置邊框或是內(nèi)邊距的話，也即沒有東西擋著它的話，內(nèi)部外邊會(huì)穿透到外層，跟外層平行

2017年10月16日 22:36
編輯回答
你好胸

查查BFC？這個(gè)問題網(wǎng)上還是好多的。
設(shè)置一下overflow:hidden;?

2017年3月6日 03:55
編輯回答
逗婦惱

這是由于外邊距疊加造成的：兩個(gè)或多個(gè)毗鄰的普通流中的塊元素垂直方向上的 margin 會(huì)折疊

解決辦法：在.a元素上觸發(fā) BFC，外邊距疊加就會(huì)被取消了。

2017年12月9日 18:21