<div class="fa">
<div class="son"></div>
</div>
.fa{
width: 300px;
height: 300px;
background: red;
}
.son{
width: 100px;
height: 100px;
background: blue;
margin-top: 50px;
}
想要的是这样的,事实上是这样的
解决的方法有好几种:
1、设置overflow为选中的这几个都是可以的
2、position设置为 absolute或fixed;
3、float不为none的时候;
4、display:inline-block,table-cell, table-caption, flex, inline-flex等等。
一直不明白为什么这样设置,就可以解决坍塌问题,其实他们都让盒子进入了BFC模式。
而BFC 会阻止外边距折叠